setTimeout en la función asíncrona

Question

Tengo una función asincrónica que quiero tener un retraso de 5000ms antes de disparar. Estoy tratando de usar setTimeout() para lograr esto. Esta función asíncrona se produce en un bucle que se ejecuta varias veces, con la función asíncrona pasando datos diferentes cada vez, por lo tanto, setInterval() no se puede utilizar aquí.

Problema: La función asíncrono se desencadena al instante sin retardo (impresiones de la consola 5 Done mensajes instantly` y bucles sin demora Lo que pasó, y cómo puedo resolverlo

Código Javascript

.?

someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     setTimeout(asyncFunction(listing, function(data) { 
      console.log('Done'); 
     }), 5000); 
    } 
}); 

Answer 1

Tiene que ajustar la función en otra función. Actualmente, está invocando la función y pasando el valor de retorno como un argumento al setTimeout. El código siguiente (correc) tly) pasar una función a setTimeout. Después de 5 segundos, la función se ejecuta.

Tuve que agregar dos funciones para lograr el comportamiento deseado, debido a problemas de alcance. Después de 5 segundos, el ciclo ya ha finalizado, y la variable listing sería igual al último elemento en listings.

someFunction(listings, function() { 
    var counter = 0; // Define counter for 5 second-delays between each call 
    for (var i in listings) { 
     var listing = listings[i]; 
     (function(listing){ //Closure function 
      setTimeout(function(){ //setTimeout function 
       // Because of the closure, `listing` is unique 
       asyncFunction(listing, function(a, b) { 
        console.log('Done'); 
       }); 
      }, 5000 * ++counter); //Increase counter for each loop 
     })(listing); 
    } 
}); 

Answer 2

es la difference.the punto clave es lo que se asyncFunction hacer? ¿Puedes pegarlo?

var foo=function(){ 
    alert("BAR"); 
    return function(){ 
     alert("I AM!"); 
    }; 
} 
setTimeout(foo(),4000); 
setTimeout(foo,5000); 

Answer 3

Sin saber lo que su asyncFunction hace, podría parecer que simplemente podría volver a la función que ha pasado él.

someFunction(listings, function() { 
    for (var i = 0; i < listings.length; ++i) { 
     setTimeout(asyncFunction(listings[i], function(data) { 
      console.log('Done'); 
     }), 5000 * i); 
    } 
}); 

function asyncFunction(lstng, func) { 
    return func; 
} 

Aunque espero que deba completar alguna lógica adicional.

function asyncFunction(lstng, func) { 
    return function() { 
     // do some stuff with the listing 

     // then invoke the func 
     func(); 
    } 
} 

ahora su asyncFunction envolturas lo que sea necesario en una nueva función que se devuelve a la setTimeout. La nueva función también invoca la devolución de llamada que aprobó.

---

JSFIDDLE DEMO

Answer 4

Si está utilizando ECMAScript6 puede utilizar Promise.

Por lo tanto crear una función de retardo que envuelven la llamada al setTimeout en una promesa:

function delay(ms) { 
    return new Promise(function (resolve) { return setTimeout(resolve, ms); }); 
}; 

y se puede utilizar de esa manera:

someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     delay(5000).then(() => { 
      return asyncFunction(listing); 
     }).then(() => { 
      console.log('Done'); 
     }); 
    } 
}); 

Si está utilizando ECMAScript 2017 puede utilizar aync/await.

Las funciones asincrónicas son prometedoras, por lo que no es necesario cambiar el código de la función de retardo.

async someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     await delay(5000); 
     await asyncFunction(listing); 
     console.log('Done'); 
    } 
});