如何在JavaScript循环中添加其他延迟？

Question

i'd like to call a function with a specific timer. I already know about setTimeout() function, but i got a problem, here it is :

// mysounds is an array of audio div

mysounds .forEach(function(value, i) {
    myLoop($("#"+value+"_s")[0].duration*1000);
    // I call my function with the duration of the sample from the audio div in parameter
});

function myLoop (timer){           
    setTimeout(function (){    
        alert('hello');
    }, timer);
}

So, as you can see the forEach loop will be call asynchronously --> all the sounds in the array will be play at the same time and i want them to be play one after the other..

Answer 1

You can use promises for this, promises represent calculating an eventual value rather than an immediate one. First, let's convert setTimeout to a promise:

function delay(ms){
    var dfd = $.Deferred();

    setTimeout(function(){
        dfd.resolve();
    }, ms);

    return dfd.promise();
}

now, let's chain our objects. I assume you have references to them in an array:

var elements = [el1,el2,el3]; // elements is an array of elements, you can convert
                              // that representation you have now with a loop.

var result = delay(0); // initial value
elements.forEach(function(el){
      result = result.then(function(){ // when our current delay expires
           alert("Hello"); // element available here as `el`
           return delay(1000); // next, wait 1000 ms
      });
});
result.then(function(){
     // in here, everything is resolved.
});

Fiddle

Answer 2

     var index = 0,
         timer = 1000;

     setinterval(function () {
                 alert (index)
                 index++;

               }, timer);

This might help you in calling your function every 1 second, but if you want to change your timing, need to clear setinterval and pass in a new timer,