Question

I am trying to create the following functionality in my javascript:

$("mySelector").each(function(){

// Do something (e.g. change div class attribute)   
// call to MyFunction(), the iteration will stop here as long as it will take for myFunction to complete

});

function myFunction() 
{   
 // Do something for e.g. 5 seconds 
}

My question is how can I stop every iteration for the duration of the myFunction()?

Answer 1

(function () {
    "use strict";

    var step = 0;
    var content = $("mySelector");
    var max = content.length;
    var speed = 5000; // ms


    var handle = setInterval(function () {
        step++;
        if (step >= max) {
            clearInterval(handle);
        } else {
            var item = content[step];
            // do something
        }
    }, speed);
}());

setInterval will do it once-every-n-miliseconds, and clearInterval will stop it when you’re done. This won’t lock up the browser (provided your “do something” also doesn’t). FRAGILE: it assumes that the results of $("mySelector") are valid for the duration of the task. If that isn’t the case then inside do something then validate item again.