Ejecutar script después de un retraso específico usando JavaScript

Question

¿Hay algún método de JavaScript similar al jQuery delay () o wait () (para retrasar la ejecución de un script durante un período de tiempo específico)?

Answer 1

Hay lo siguiente:

setTimeout(function, milliseconds);

función que se puede pasar el tiempo después del cual se ejecutará la función.

Ver: Ventana setTimeout () Método .

Answer 2

Solo para agregar a lo que todos los demás han dicho sobre setTimeout : Si desea llamar a una función con un parámetro en el futuro, debe configurar algunas llamadas a funciones anónimas.

Debe pasar la función como argumento para que se llame más tarde. En efecto, esto significa sin corchetes detrás del nombre. Lo siguiente llamará a la alerta de inmediato, y mostrará 'Hola mundo':

var a = "world";
setTimeout(alert("Hello " + a), 2000);

Para solucionar esto, puede poner el nombre de una función (como lo ha hecho Flubba) o puede usar una función anónima. Si necesita pasar un parámetro, debe usar una función anónima.

var a = "world";
setTimeout(function(){alert("Hello " + a)}, 2000);
a = "Stack Overflow";

Pero si ejecuta ese código, notará que después de 2 segundos la ventana emergente dirá 'Hola desbordamiento de pila'. Esto se debe a que el valor de la variable a ha cambiado en esos dos segundos. Para que diga 'Hola mundo' después de dos segundos, debe usar el siguiente fragmento de código:

function callback(a){
    return function(){
        alert("Hello " + a);
    }
}
var a = "world";
setTimeout(callback(a), 2000);
a = "Stack Overflow";

Esperará 2 segundos y luego aparecerá 'Hola mundo'.

Answer 3

Solo para expandir un poco ... Puede ejecutar el código directamente en la llamada setTimeout , pero como @ patrick dice, normalmente asignas una función de devolución de llamada, como esta. El tiempo es milisegundos

setTimeout(func, 4000);
function func() {
    alert('Do stuff here');
}

Answer 4

Si realmente desea tener una función de bloqueo (sincrónico) retardo (para lo que sea), ¿por qué no hacer algo como esto?

<script type="text/javascript">
    function delay(ms) {
        var cur_d = new Date();
        var cur_ticks = cur_d.getTime();
        var ms_passed = 0;
        while(ms_passed < ms) {
            var d = new Date();  // Possible memory leak?
            var ticks = d.getTime();
            ms_passed = ticks - cur_ticks;
            // d = null;  // Prevent memory leak?
        }
    }

    alert("2 sec delay")
    delay(2000);
    alert("done ... 500 ms delay")
    delay(500);
    alert("done");
</script>

Answer 5

Debe usar setTimeout y pasarle una función de devolución de llamada. La razón por la que no puedes usar sleep en javascript es porque bloquearías que toda la página no hiciera nada mientras tanto. No es un buen plan. Usa el modelo de eventos de Javascript y mantente feliz. ¡No luches!

Answer 6

También puede usar window.setInterval () para ejecutar algunos código repetidamente en un intervalo regular.

Answer 7

Para agregar los comentarios anteriores, me gustaría decir lo siguiente:

La función setTimeout () en JavaScript no detiene la ejecución del script per se, sino que simplemente le dice al compilador que ejecute el código en algún momento en el futuro.

No hay una función que pueda pausar la ejecución integrada en JavaScript. Sin embargo, puede escribir su propia función que haga algo como un bucle incondicional hasta que se alcance la hora utilizando la función Date () y agregando el intervalo de tiempo que necesita.

Answer 8

Si solo necesita probar un retraso, puede usar esto:

function delay(ms) {
   ms += new Date().getTime();
   while (new Date() < ms){}
}

Y luego, si quieres retrasar 2 segundos, hazlo:

delay(2000);

Aunque podría no ser el mejor para la producción. Más sobre eso en los comentarios

Answer 9

¿Por qué no puedes poner el código detrás de una promesa? (escrito en la parte superior de mi cabeza)

new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000);
}).then(function() {
  console.log('do whatever you wanted to hold off on');
});

Answer 10

La respuesta simple es:

setTimeout(
    function () {
        x = 1;
    }, 1000);

La función anterior espera 1 segundo (1000 ms) y luego establece x en 1. Obviamente este es un ejemplo; Puedes hacer lo que quieras dentro de la función anónima.

Answer 11

Realmente me gustó la explicación de Maurius (respuesta con el mayor número de votos) con los tres métodos diferentes para llamar a setTimeout .

En mi código, deseo automáticamente navegar automáticamente a la página anterior al finalizar un evento de guardado de AJAX. La finalización del evento de guardado tiene una ligera animación en el CSS que indica que el guardado se realizó correctamente.

En mi código encontré una diferencia entre los dos primeros ejemplos:

setTimeout(window.history.back(), 3000);

Este no espera el tiempo de espera: el back () se llama casi de inmediato, sin importar el número que puse para el retraso.

Sin embargo, cambiando esto a:

setTimeout(function() {window.history.back()}, 3000);

Esto hace exactamente lo que esperaba.

Esto no es específico de la operación back (), lo mismo sucede con alert () . Básicamente, con el alert () utilizado en el primer caso, el tiempo de demora se ignora. Cuando descarto la ventana emergente, la animación para el CSS continúa.

Por lo tanto, recomendaría el segundo o tercer método que describe, incluso si está utilizando funciones integradas y no usa argumentos.

Answer 12

Tuve algunos comandos ajax que quería ejecutar con un retraso en el medio. Aquí hay un ejemplo simple de una manera de hacer eso. Estoy preparado para ser despedazado por mi enfoque poco convencional. :)

//  Show current seconds and milliseconds
//  (I know there are other ways, I was aiming for minimal code
//  and fixed width.)
function secs()
{
    var s = Date.now() + ""; s = s.substr(s.length - 5);
  return s.substr(0, 2) + "." + s.substr(2);
}

//  Log we're loading
console.log("Loading: " + secs());

//  Create a list of commands to execute
var cmds = 
[
    function() { console.log("A: " + secs()); },
    function() { console.log("B: " + secs()); },
    function() { console.log("C: " + secs()); },
    function() { console.log("D: " + secs()); },
    function() { console.log("E: " + secs()); },
  function() { console.log("done: " + secs()); }
];

//  Run each command with a second delay in between
var ms = 1000;
cmds.forEach(function(cmd, i)
{
    setTimeout(cmd, ms * i);
});

// Log we've loaded (probably logged before first command)
console.log("Loaded: " + secs());

Puedes copiar el bloque de código y pegarlo en una ventana de la consola y ver algo como:

Loading: 03.077
Loaded: 03.078
A: 03.079
B: 04.075
C: 05.075
D: 06.075
E: 07.076
done: 08.076

Answer 13

La solución más sencilla para llamar a su función con retraso es:

function executeWithDelay(anotherFunction) {
    setTimeout(anotherFunction, delayInMilliseconds);
}

Answer 14

Como dijo otro, setTimeout es su apuesta más segura
Pero a veces no puede separar la lógica en una nueva función, entonces puede usar Date.now () para obtener milisegundos y hacer la demora ...

function delay(milisecondDelay) {
   milisecondDelay += Date.now();
   while(Date.now() < milisecondDelay){}
}

alert('Ill be back in 5 sec after you click ok....');
delay(5000);
alert('im back ' +new Date());