Wait/Pause/Sleep in jQuery Each Loop between Iterations

javascript, jquery

Solution

You cannot really do this with `$.each`. You can use `setTimeout` and keep a reference to the index you are currently at:

function process(elements, cb, timeout) {
    var i = 0;
    var l = elements.length;

    (function fn() {
        cb.call(elements[i++]);
        if (i < l) {
            setTimeout(fn, timeout);
        }
    }());
}

process($('.item'), function() {
    $(this).click();
}, 500);

Problem

I simply want to add a pause after each iteration of a jQuery each loop, I can't seem to figure it out. ``` $(".item").each(function(i){ var el = this; var timer = setTimeout(function(){ $(el).trigger("click"); }, 500); }); ``` This is not firing every 1/2 second, but rather triggering click on all items at once. I want something like this (pseudocode): ``` $(".item").each(function(i){ $(this).trigger("click"); wait(500); // wait a half second before the next iteration }); ``` Any working method of this?

Original source