Ajaxian

Wednesday, January 14th, 2009

Looping through your items without waiting around

Category: Articles, JavaScript

Nicholas C. Zakas has taken his long running script post and is now flushing out ways to stop this from happening.

His first post details loops and he offers up a solution to take the synchronicity out of the world:

The secret to unraveling this problem is to evaluate the loop to answer two questions:

1. Does the loop have to execute synchronously?
2. Does the order in which the loop’s data is processed matter?

If the answer to both of these questions is “no,” then you have some options for splitting up the work done in the loop. The key is to examine the code closely to answer these questions. A typical loop looks like this:

PLAIN TEXT

JAVASCRIPT:

1.  
2. for(var i=0; i <items.length; i++){
3.     process(items[i]);
4. }
5.  

This doesn’t look too bad though may take very long depending on the amount of time necessary to run the process() function. If there’s no code immediately after the loop that depends on the results of the loop executing, then the answer to the first question is “no.” You can clearly see that each iteration through the loop isn’t dependent on the previous iteration because it’s just dealing with one value at a time, so the answer to the second question is “no.” That means the loop can be split in a way that can free up the browser and avoid long-running script warnings.

In Professional JavaScript, Second Edition, I introduce the following function as a way to deal with loops that may take a significant amount of time to execute:

PLAIN TEXT

JAVASCRIPT:

1.  
2. function chunk(array, process, context){
3.     var items = array.concat();   //clone the array
4.     setTimeout(function(){
5.         var item = items.shift();
6.         process.call(context, item);
7.  
8.         if (items.length> 0){
9.             setTimeout(arguments.callee, 100);
10.         }
11.     }, 100);
12. }
13.  

The chunk() function is designed to process an array in small chunks (hence the name), and accepts three arguments: a “to do” list of items, the function to process each item, and an optional context variable for setting the value of this within the process() function. A timer is used to delay the processing of each item (100ms in this case, but feel free to alter for your specific use). Each time through, the first item in the array is removed and passed to the process() function. If there’s still items left to process, another timer is used to repeat the process.

Looking forward to the rest of the series!

Posted by Dion Almaer at 5:55 am