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.

git-svn-id: https://develop.svn.wordpress.org/trunk@20031 602fd350-edb4-49c9-b593-d223f7449a82

wp-includes/customize-controls.php

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

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 = $('<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()
 			});
 		},
@@ -54,6 +118,9 @@
 	 * ===================================================================== */
 
 	$( function() {
+		if ( ! api.settings )
+			return;
+
 		var previewer,
 			controls = $('[name^="' + api.settings.prefix + '"]');
 
@@ -72,6 +139,8 @@
 
 			setting.control.link( setting );
 			setting.link( setting.control );
+
+			setting.bind( previewer.refresh );
 		});
 
 		// Temporary accordion code.
@@ -87,11 +156,6 @@
 			return false;
 		});
 
-		$('#refresh').click( function() {
-			previewer.refresh();
-			return false;
-		});
-
 		// Fetch prefixed settings.
 		$('[name^="' + api.settings.prefix + '"]').each( function() {
 			// console.log( this.name );