Cómo configurar el retraso de tiempo en javascript

Tengo esto un poco de js en mi sitio web para cambiar las imágenes, pero necesito un retraso al hacer clic en la imagen por segunda vez. El retraso debe ser de 1000 ms. Entonces haría clic en img.jpg y luego aparecería img_onclick.jpg. Luego, debe hacer clic en la imagen img_onclick.jpg y luego debería haber un retraso de 1000 ms antes de que se muestre nuevamente 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();
    });
});

Uso setTimeout():

var delayInMilliseconds = 1000; //1 second

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

Si desea hacerlo sin setTimeout: consulte esta pregunta .

setTimeout(function(){


}, 500); 

Coloque su código dentro del { }

500 = 0.5 segundos

2200 = 2.2 segundos

etc.

Solución ES-6

A continuación se muestra un código de muestra que usa aync / await para tener un retraso real.

Hay muchas limitaciones y esto puede no ser útil, pero solo publicar aquí por diversión.

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();

Hay dos tipos (principalmente utilizados) de función de temporizador en javascript setTimeouty setInterval( otros )

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

setTimeoutse ejecuta solo una vez después de la demora, mientras que setIntervalsigue llamando a la función de devolución de llamada después de cada milisegundo de demora.

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

clearTimeouty clearIntervalambos métodos toman un identificador entero devuelto de las funciones anteriores setTimeoutysetInterval

Ejemplo:

setTimeout

alert("before setTimeout");

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

  alert("after setTimeout");

Si ejecuta el código anterior, verá que alerta before setTimeouty after setTimeoutfinalmente alerta I am setTimeoutdespués de 1 segundo (1000 ms)

Lo que puede observar en el ejemplo es que setTimeout(...)es asíncrono, lo que significa que no espera a que transcurra el temporizador antes de pasar a la siguiente instrucción, es deciralert("after 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 ejecuta el código anterior, verá que alerta before setIntervaly after setIntervalfinalmente alerta I am setInterval 5 veces después de 1 segundo (1000 ms) porque setTimeout borra el temporizador después de 5 segundos o, de lo contrario, cada 1 segundo recibirá alerta I am setIntervalinfinitamente.

¿Cómo hace eso el navegador internamente?

Te lo explicaré brevemente.

Para entender que tienes que saber sobre la cola de eventos en javascript. Hay una cola de eventos implementada en el navegador. Cada vez que se desencadena un evento en js, todos estos eventos (como clics, etc.) se agregan a esta cola. Cuando su navegador no tiene nada que ejecutar, toma un evento de la cola y los ejecuta uno por uno.

Ahora, cuando llame setTimeouto setIntervalsu devolución de llamada se registre en un temporizador en el navegador y se agregue a la cola de eventos después de que expire el tiempo dado y, finalmente, javascript toma el evento de la cola y lo ejecuta.

Esto sucede porque el motor de JavaScript tiene un solo subproceso y solo pueden ejecutar una cosa a la vez. Por lo tanto, no pueden ejecutar otros javascript y realizar un seguimiento de su temporizador. Es por eso que estos temporizadores están registrados con el navegador (el navegador no tiene un solo subproceso) y puede realizar un seguimiento del temporizador y agregar un evento en la cola después de que expire el temporizador.

Lo mismo ocurre setIntervalsolo en este caso, el evento se agrega a la cola una y otra vez después del intervalo especificado hasta que se borra o se actualiza la página del navegador.

Nota

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

Por lo tanto, su devolución de llamada en algún momento puede tardar más que el tiempo de retraso especificado para ser llamado 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 un solo hilo. Entonces, si bloquea el hilo por mucho tiempo.

Como este código

while(true) { //infinite loop 
}

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

Para las llamadas de sincronización, puede usar el siguiente método:

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

Si necesita actualizar, esta es otra posibilidad:

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

Esto es lo que estoy haciendo para resolver este problema. Estoy de acuerdo en que esto se debe al problema de tiempo y necesitaba una pausa para ejecutar el código.

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

Este nuevo código lo pausará durante 1 segundo y, mientras tanto, ejecutará su código.

Daré mi opinión porque me ayuda a entender lo que estoy haciendo.

Para hacer una presentación de diapositivas de desplazamiento automático que tiene una espera de 3 segundos, hice lo siguiente:

var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i<6; i++){//I have 6 images
            setTimeout(nextImage, delayTime);
            delayTime += timeIncrement;
        }
        isPlaying = false;

   }else{
       alert("auto play off");
   }
}

autoPlay(isPlaying);

Recuerde que cuando ejecute setTimeout () de esta manera; ejecutará todas las funciones de tiempo de espera como si se ejecutaran al mismo tiempo, suponiendo que en setTimeout (nextImage, delayTime); el tiempo de retraso es de 3000 milisegundos estáticos.

Lo que hice para explicar esto fue agregar 3000 mili / s adicionales después de cada uno para aumentar el bucle a través de delayTime += timeIncrement;.

Para aquellos que se preocupan por esto, así es mi nextImage ():

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}