Changeset 20031

Timestamp:

02/29/2012 01:17:21 AM (15 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() {