diff --git a/wp-includes/customize-controls.php b/wp-includes/customize-controls.php index 04d765c49f..ab0df490cd 100644 --- a/wp-includes/customize-controls.php +++ b/wp-includes/customize-controls.php @@ -69,7 +69,6 @@ do_action( 'customize_controls_print_scripts' ); diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js index 40f46ff40d..b29c3b7d27 100644 --- a/wp-includes/js/customize-controls.dev.js +++ b/wp-includes/js/customize-controls.dev.js @@ -2,6 +2,8 @@ var api = wp.customize; api.Previewer = api.Messenger.extend({ + refreshBuffer: 250, + /** * Requires params: * - iframe - a selector or jQuery element @@ -11,9 +13,49 @@ initialize: function( params, options ) { $.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, { targetWindow: this.iframe[0].contentWindow }); @@ -34,9 +76,31 @@ this.refresh(); }, + loader: function() { + var self = this, + name; + + if ( this.loading ) + return this.loading; + + name = this.iframe.prop('name'); + + this.loading = $('