Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loop over array but with a time delay

Tags:

javascript

I am trying to loop over an array. However, I would like to add a 15 second delay between each array value. This will write value 1 to console, then count down 15 seconds and write value 2 to console, and so on.

I'm not sure exactly how to do this. My code as of now just outputs the numbers 15 all the way to 1 on the console at once with no actual count down and no array values.

array

["l3", "l4", "l5", "l6", "l7", "l8", "l9", "l10", "l11", "l12", "l13", "l14", "l15", "l16"] 

code

var adArray = [];
// get links with class adfu
var adfuClass = document.getElementsByClassName('adfu');
for (var i = 0; i < adfuClass.length; i++) {
    var ids = adfuClass[i].id
    var newIds = ids.replace(/tg_/i, "l");
    adArray.push(newIds);
}
// get links with class ad30
var ad30Class = document.getElementsByClassName('ad30');
for (var i = 0; i < ad30Class.length; i++) {
    var ids = ad30Class[i].id;
     var newIds = ids.replace(/tg_/i, "l");
     adArray.push(newIds);
}
// get links with class adf
var adfClass = document.getElementsByClassName('adf');
for (var i = 0; i < adfClass.length; i++) {
    var ids = adfClass[i].id;
     var newIds = ids.replace(/tg_/i, "l");
     adArray.push(newIds);
}
// loop through array with all new ids
for (var i = 0, l = adArray.length; i < l; i++) {
    var counter = 15;
    var countDown = setTimeout(function() {
        console.log(counter);
        if (counter == 0) {
            console.log(adArray[i]);
        }
        counter--;
    }, 1000);
}
like image 204
Daniel Avatar asked Dec 06 '22 14:12

Daniel


2 Answers

// loop through array with all new ids
var i = 0, l = adArray.length;
(function iterator() {
    console.log(adArray[i]);

    if(++i<l) {
        setTimeout(iterator, 15000);
    }
})();

Something like this?

like image 58
Cameron Martin Avatar answered Dec 28 '22 15:12

Cameron Martin


There's a really simple pattern for this type of iterator, using closure scope to store a loop counter and a nested looper() function which runs the setTimeout() iterator. The looper() function actually iterates the loop count, so there is no need for a for or do/while construct. I use this pattern often, and it works really well.

EDIT: Modified the condition to check for loop > 1, not loop > 0, which logged Loop count: 0. This can be tweaked, and technically, the looper() here runs 16 times.

(function(){
    var loop = 15;

    var looper = function(){
        console.log('Loop count: ' + loop);

        if (loop > 1) {
            loop--;
        } else {
            console.log('Loop end.');
            return;
        }

        setTimeout(looper, 15000);
    };

    looper();
})();

http://jsfiddle.net/userdude/NV7HU/2

like image 21
Jared Farrish Avatar answered Dec 28 '22 14:12

Jared Farrish