javascript

Chapter 18: Advanced Techniques
When you find a loop is taking a significant amount of time to complete, and you can answer “ no ” to
either of the previous two questions, you can split the loop using timers. This is a technique called array
chunking , whereby processing of the array happens in small chunks, most often one at a time. The basic
idea is to create a queue of items to process, use timers to pull the next item to process, process it, and
then set another timer. The basic pattern looks like this:
setTimeout(function(){
//get next item and process it
var item = array.shift();
process(item);
//if there’s more items, set another timeout
if(array.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
In the array chunking pattern, the array variable is essentially a “ to do ” list of items to process. Using
the shift() method, you retrieve the next item in the queue to process and pass it in to a function. If
there are still items in the queue, then another timer is set, calling the same anonymous function via
arguments.callee . You can accomplish array chunking easily, using the following function:
function chunk(array, process, context){
setTimeout(function(){
var item = array.shift();
process.call(context, item);
}
if (array.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
The chunk() method accepts three arguments: the array of items to process, a function to use to process the
items, and an optional context in which to run the function. Inside the function is a duplication of the basic
pattern described previously, with the process() function being called via call() so that a proper context
can be set if necessary. The interval of the timers is set to 100 milliseconds, which gives the JavaScript
process time to go idle between item processing events. This interval can be changed based on your needs,
although 100 milliseconds works well in most cases. The function can be used as follows:
var data = [12,123,1234,453,436,23,23,5,4123,45,346,5634,2234,345,342];
function printValue(item){
var div = document.getElementById(“myDiv”);
div.innerHTML += item + “ < br > ”;
}
chunk(data, printValue);
This example outputs each value in the data array to a < div > element by using the printValue()
function. Since the function exists in the global scope, there ’ s no need to pass in a context object
to chunk() .
603