nQ - Slowing Down AJAX Events

Not So Fast.

nQ is a very simple bit of code that slows down the execution of JavaScript on a visitor's browser so that it doesn't lock up the interface.  This is particularly important when interacting with complex constructs like Google Maps during the initial page load.

This system was developed because our content management system was adding dozens of pins to a Google Map and found that all of the activity made it seem like the computer "froze" on older computers.  nQ works by observing the apparent elapsed time between function calls versus the actual time as measured on a wall clock.  JavaScript cannot directly determine how much burden the computer is under, but it can measure the time.  When the amount of time that has elapsed is greater than the time delay requested by the nQ construct, the system is under stress.  This code works by adjusting the delay between a queue of function calls so that an overburdened system doesn't completely lock up during page load when there are hundreds or thousands of function calls to be completed.

It should be noted that this bit of code relies our our Function.curry, an extension to the MooTools framework.  Function.curry allows for dynamic re-writing of the argument list of a function after it has been created but before it is executed. Our Function.curry is used by developers around the world who need this functionality in MooTools.

While short and simple, nQ is a real workhorse and does a great job.

// nQ ultra-simple performance-sensitive queueing mechanism.
	// ---------------------------------------------------------
	QT = null;
	Q = [];
	nQ = function(work){
		/*
		 * This first if is to roll in extra arguments that may arrive
		 * at nQ that were really meant for the work function.
		 */
		if(arguments.length-1)
		{
			var w = work;
			var args = Array.prototype.slice.call(arguments).slice(1);
			work = function(){ return w.apply(w, args) };
		}
		if(!Q)
			return work();
		Q.push(work);
		if(!QT)
			dQ.curry($time(), 100).delay(100);
		
	};
	
	dQ = function(start,spacer)
	{
		//if(window.console) window.console.log( "Spacer now " + spacer );
		var now = $time();
		if(Q.length)
		{
			var work = Q.shift(); work();
			if(!Q.length)	// if that was the last item in the queue
				return $clear(QT);
			var drift = now - start;
			var high = Math.floor(spacer*1.10);
			var low = Math.floor(spacer*.90);
			if(drift > high)
			{
				spacer = high;
			}
			if(drift 

• Prev