Changeset 20031

Timestamp:

02/29/2012 01:17:21 AM (8 years ago)

Author:

koopersmith

Message:

Improve page loads in the theme customizer by layering loading iframes. Automate refreshing, but debounce multiple refresh events to prevent hammering the server with requests. see #19910.

Location:

trunk/wp-includes

Files:

• customize-controls.php (modified) (1 diff)
• js/customize-controls.dev.js (modified) (6 diffs)

trunk/wp-includes/customize-controls.php

@@ -70 +70 @@
         <div id="customize-footer" class="customize-section">
             <?php
-            submit_button( __( 'Refresh' ), 'secondary', 'refresh', false );
             submit_button( __( 'Save' ), 'primary', 'save', false );
             ?>

trunk/wp-includes/js/customize-controls.dev.js

@@ -3 +3 @@
 
     api.Previewer = api.Messenger.extend({
+        refreshBuffer: 250,
+
         /**
          * Requires params:
@@ -12 +14 @@
             $.extend( this, options || {} );
 
+            this.loaderUuid = 0;
+
+            /*
+             * Wrap this.refresh to prevent it from hammering the servers:
+             *
+             * If refresh is called once and no other refresh requests are
+             * loading, trigger the request immediately.
+             *
+             * If refresh is called while another refresh request is loading,
+             * debounce the refresh requests:
+             * 1. Stop the loading request (as it is instantly outdated).
+             * 2. Trigger the new request once refresh hasn't been called for
+             *    self.refreshBuffer milliseconds.
+             */
+            this.refresh = (function( self ) {
+                var refresh  = self.refresh,
+                    callback = function() {
+                        timeout = null;
+                        refresh.call( self );
+                    },
+                    timeout;
+
+                return function() {
+                    if ( typeof timeout !== 'number' ) {
+                        if ( self.loading ) {
+                            self.loading.remove();
+                            delete self.loading;
+                            self.loader();
+                        } else {
+                            return callback();
+                        }
+                    }
+
+                    clearTimeout( timeout );
+                    timeout = setTimeout( callback, self.refreshBuffer );
+                };
+            })( this );
+
             this.iframe = api.ensure( params.iframe );
             this.form   = api.ensure( params.form );
+
+            this.container = this.iframe.parent();
 
             api.Messenger.prototype.initialize.call( this, params.url, {
@@ -35 +77 @@
             this.refresh();
         },
+        loader: function() {
+            var self = this,
+                name;
+
+            if ( this.loading )
+                return this.loading;
+
+            name = this.iframe.prop('name');
+
+            this.loading = $('<iframe />', {
+                name: name + '-loading-' + this.loaderUuid++
+            }).appendTo( this.container );
+
+            this.loading.one( 'load', function() {
+                self.iframe.remove();
+                self.iframe = self.loading;
+                delete self.loading;
+                self.iframe.prop( 'name', name );
+            });
+
+            return this.loading;
+        },
         refresh: function() {
             this.submit({
-                target: this.iframe.prop('name'),
+                target: this.loader().prop('name'),
                 action: this.url()
             });
@@ -55 +119 @@
 
     $( function() {
+        if ( ! api.settings )
+            return;
+
         var previewer,
             controls = $('[name^="' + api.settings.prefix + '"]');
@@ -73 +140 @@
             setting.control.link( setting );
             setting.link( setting.control );
+
+            setting.bind( previewer.refresh );
         });
 
@@ -88 +157 @@
         });
 
-        $('#refresh').click( function() {
-            previewer.refresh();
-            return false;
-        });
-
         // Fetch prefixed settings.
         $('[name^="' + api.settings.prefix + '"]').each( function() {