Avoiding "Unresponsive Script" message in a foreach loop

Question

I am writing a javascript program with a very long-running foreach loop like the following:

for (property in object) {
    difficultTask();
}

I've seen that you can do some things with setTimeout which can allow you to periodically return control to the browser; however, I haven't seen any that are able to do this with a foreach loop, only a for loop with an index. Additionally, these tasks cannot be completed asynchronously since each iteration depends on a result from the previous iteration.

One solution I can think of is to split up my object into a lot of smaller objects and iterate through each of them, setting a timeout in between each one, but I'd like to see if this is possible without resorting to that.

Is there a way to do this without drastically changing how I have my objects?

Answer 1

Get all the properties into an array and then you can cycle through the array with an index variable and a setTimeout():

var props = [];
for (property in object) {
    props.push(property);
}

var index = 0;
function nextChunk() {
    if (index < props.length) {
        difficultTask(object[props[index++]]));

        // schedule the next chunk of work after we let the browser process events
        setTimeout(nextChunk, 1);
    }

}
nextChunk();

You could also get all the props into an array with this is you don't need IE7 or IE8 compatibility:

var props = Object.keys(object);

---

Depending upon what the long running task does, web workers could also be an interesting option, but no support in IE until IE 10.

Answer 2

I think that this snippet can achieve what you want:

function executeAndSleep(array,currentPos,step,sleepTime){
   for(var i = currentPos;i<currentPos+step&&i<array.length;i++){
      //execute your magic here
   }
   if(currentPos+step<= array.length){
       setTimeout(function(){
             executeAndSleep(array,currentPos+step,step,sleepTime);
        },sleepTime);
   }
}

you can see it working here http://jsfiddle.net/victorrseloy/3utwF/

Answer 3

This sounds like a useful point to use web workers. They allow concurrent execution of javascript code. You might want to read the introduction to webworkers. The article is quite old (might now be outdated in some points), but still good.

The browser support is now pretty good. If you need browser support for old IEs, you can use a polyfill, so you can start working with web workers right now.