Búsqueda de sitios web

jquery - Cómo establecer un retraso de tiempo en javascript

Tengo un fragmento de JavaScript en mi sitio web para cambiar imágenes, pero necesito un retraso cuando haces clic en la imagen por segunda vez. El retraso debe ser de 1000 ms. Entonces harías clic en img.jpg y aparecería img_onclick.jpg. Luego harías clic en la imagen img_onclick.jpg y debería haber un retraso de 1000 ms antes de que se muestre de nuevo img.jpg.

Aquí está el código:

jQuery(document).ready(function($) {

    $(".toggle-container").hide();
    $(".trigger").toggle(function () {
        $(this).addClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img_onclick.jpg');
    }, function () {
        $(this).removeClass("active");
        $(".trigger").find('img').prop('src', 'http://localhost:8888/images/img.jpg');
    });
    $(".trigger").click(function () {
        $(this).next(".toggle-container").slideToggle();
    });
});

Respuesta #1

Usa setTimeout():

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

Si quieres hacerlo sin setTimeout: Consulta esta pregunta.

Respuesta #2

A continuación se muestra un código de ejemplo que utiliza async/await de ES6 para reanudar la ejecución de una función después de un retraso.

const delay = (delayInms) => {
  return new Promise(resolve => setTimeout(resolve, delayInms));
};

const sample = async () => {
  console.log('a');
  console.log('waiting...')
  let delayres = await delay(3000);
  console.log('b');
};
sample();

Respuesta #3

Hay dos tipos de funciones de temporizador (principalmente usadas) en JavaScript: setTimeout y setInterval (otros)

Ambos métodos tienen la misma firma. Toman una función de devolución de llamada y un tiempo de demora como parámetro.

setTimeout se ejecuta solo una vez después del retraso, mientras que setInterval sigue llamando a la función de devolución de llamada después de cada retraso en milisegundos.

Ambos métodos devuelven un identificador entero que se puede usar para cancelarlos antes de que expire el temporizador.

clearTimeout y clearInterval ambos métodos toman un identificador entero devuelto por las funciones anteriores setTimeout y setInterval

Ejemplo:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

Si ejecutas el código anterior verás que muestra una alerta antes de setTimeout y luego después de setTimeout, finalmente muestra una alerta Soy setTimeout después de 1 segundo (1000 ms)

Lo que se puede notar del ejemplo es que setTimeout(...) es asíncrono, lo que significa que no espera a que el temporizador se agote antes de pasar a la siguiente instrucción, es decir, alert("después de setTimeout");

Ejemplo:

setInterval

alert("before setInterval"); //called first

 var tid = setInterval(function(){
        //called 5 times each time after one second  
      //before getting cleared by below timeout. 
        alert("I am setInterval");
   },1000); //delay is in milliseconds 

  alert("after setInterval"); //called second

setTimeout(function(){
     clearInterval(tid); //clear above interval after 5 seconds
},5000);

Si ejecutas el código anterior verás que muestra una alerta con before setInterval y luego con after setInterval, finalmente muestra una alerta con I am setInterval 5 veces después de 1 segundo (1000 ms) porque el setTimeout limpia el temporizador después de 5 segundos, de lo contrario cada 1 segundo recibirías la alerta I am setInterval infinitamente.

¿Cómo hace eso internamente el navegador?

Voy a explicar brevemente.

Para entender eso tienes que conocer la cola de eventos en JavaScript. Hay una cola de eventos implementada en el navegador. Siempre que se dispara un evento en JS, todos estos eventos (como clic, etc.) se agregan a esta cola. Cuando tu navegador no tiene nada que ejecutar, toma un evento de la cola y los ejecuta uno por uno.

Ahora, cuando llamas a setTimeout o setInterval, tu función de devolución de llamada se registra en un temporizador en el navegador y se agrega a la cola de eventos después de que expire el tiempo indicado y, eventualmente, JavaScript toma el evento de la cola y lo ejecuta.

Esto ocurre así, porque el motor de JavaScript es de un solo hilo y solo puede ejecutar una cosa a la vez. Por lo tanto, no pueden ejecutar otro JavaScript y mantener un seguimiento de tu temporizador. Por eso estos temporizadores se registran con el navegador (los navegadores no son de un solo hilo) y pueden mantener el seguimiento del temporizador y agregar un evento a la cola después de que el temporizador expire.

lo mismo sucede con setInterval, solo que en este caso el evento se agrega a la cola una y otra vez después del intervalo especificado hasta que se borre o se actualice la página del navegador.

Nota

El parámetro de retraso que pasas a estas funciones es el tiempo de retraso mínimo para ejecutar la devolución de llamada. Esto se debe a que, después de que el temporizador expire, el navegador agrega el evento a la cola para ser ejecutado por el motor de JavaScript, pero la ejecución de la devolución de llamada depende de la posición de tus eventos en la cola y, dado que el motor es de un solo hilo, ejecutará todos los eventos en la cola uno por uno.

Por lo tanto, su devolución de llamada puede a veces tardar más que el tiempo de retraso especificado en ser llamada, especialmente cuando su otro código bloquea el hilo y no le da tiempo para procesar lo que hay en la cola.

Y como mencioné, JavaScript es de un solo hilo. Entonces, si bloqueas el hilo por mucho tiempo.

Como este código

while(true) { //infinite loop 
}

Su usuario puede recibir un mensaje que diga la página no responde.

Respuesta #4

Para llamadas síncronas, puedes usar el método siguiente:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Artículos relacionados