Problema

Eu me deparei com um problema hoje, onde gostaria de atrasar o loop de Javascript antes que ele processe o próximo item. Como posso fazer isso?

var items = [ 
    [0, 1, 2],
    [3, 4, 5]
];

Por exemplo, depois de iterar através do primeiro elemento ( [0, 1, 2]), ele deve esperar por X segundos antes de ir para o próximo elemento ( [3, 4, 5])

Solução

Poderíamos resolver isso usando uma combinação de setTimeout+ recursive, aqui está como eu resolvi

function delay_loop(items) {

    var data  = items.shift(),
        // delay between each loop
        delay = 2000;

    // start a delay
    setTimeout(function(){

        // process array data
        for(var i=0, l=data.length; i<l; i++) {
            console.log(data[i]);
        }

        // recursive call 
        if (items.length)
            delay_loop(items)

    }, delay);
}

Experimente com delay_loop([[0, 1, 2], [3, 4, 5]])produzirá o seguinte resultado.

(delay for 2 secs)
1
2
3
(delay for 2 secs)
4
5
6