Adding time delay to a for-loop

Question

I am new to javascript and I am trying to make small exercises every day. I am having difficulty figuring out if it is possible to add a time delay to a for-loop. So when the code goes from one i to another it will wait one second.

I am trying to build a small program that plays sounds for each letter that user input. For example, for numbers, it will play a sound and another sound will be played for letters. It just has to wait one second when it goes from one i to another (i++) so the sounds are not played at once.

Thank you in advance.

function getText()
    {
    var myString=document.name1.ids.value;
    var list3 = myString.split('')
    var list1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
    var list2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
    for (var i = 0; i < list3.length; i++) {
        if(list1.indexOf(list3[i]) >= 0){
           audio.play();

    }
        else if(list2.indexOf(list3[i]) >= 0){
           audio2.play();
    }
        else{

    }
    }
    }

As JS is mono-thread, this is a very bad idea to put delay into loop.You might try to use timer such window.setTimeout(callback,1000), with callback the function to call the very next second. — , May 09 '14 at 09:03
possible duplicate of [How do I add a delay in a JavaScript loop?](http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — Felix Kling, May 09 '14 at 09:06

T.J. Crowder · Answer 1 · 2014-05-09T09:06:29.967

You can't literally delay execution of a for loop, but you can use a series of setTimeout:

function getText() {
    var myString = document.name1.ids.value;
    var list3 = myString.split('')
    var list1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
    var list2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

    for (var i = 0; i < list3.length; ++i) {
        setTimeout(playOne.bind(null, list3[i]), i*1000);
    }

    function playOne(entry) {
        if (list1.indexOf(entry) >= 0) {
            audio.play();

        } else if (list2.indexOf(entry) >= 0) {
            audio2.play();
        }
    }
}

That works by scheduling a callback for each entry in list3 at 0 seconds, 1 second, 2 seconds, etc. Function#bind returns a new function that, when called, will run with the given this value (we use null because we don't need a specific one) and the argument you give it. So there we queue playOne to play the first entry at 0 seconds, the second entry at one second, etc.

On an engine with Array#forEach (they nearly all have it, and you can shim the ones that don't) that can be simpler:

function getText() {
    var myString = document.name1.ids.value;
    var list3 = myString.split('')
    var list1 = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
    var list2 = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

    list3.forEach(function(entry) {
        if (list1.indexOf(entry) >= 0) {
            audio.play();

        } else if (list2.indexOf(entry) >= 0) {
            audio2.play();
        }
    });
}

Adding time delay to a for-loop

1 Answers1