Tengo esta pieza de js en mi sitio web para cambiar las imágenes, pero necesito un retraso cuando se hace clic en la imagen por segunda vez. El retraso debe ser 1000ms. Así que usted haga clic en el img.jpg entonces el img_onclick.jpg aparecería. A continuación, haga clic en la imagen img_onclick.jpg debe ser entonces un retraso de 1000ms antes de la img.jpg se muestra de nuevo.
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();
});
});
Utilice setTimeout()
:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Si quieres hacerlo sin setTimeout
: Consulte esta pregunta.
Hay dos tipos de funciones de temporizador (las más utilizadas) en javascript setTimeout
y setInterval
(otro)
Ambos métodos tienen la misma firma. Toman una función de devolución de llamada y un tiempo de retardo como parámetro.
setTimeout
se ejecuta sólo una vez después del retraso mientras que setInterval
sigue llamando a la función de devolución de llamada después de cada milisegundo de retraso.
Ambos métodos devuelven un identificador entero que puede ser utilizado para borrarlos antes de que el temporizador expire.
Los métodos clearTimeout
y clearInterval
toman un identificador entero devuelto por las funciones anteriores setTimeout
y setInterval
.
**Ejemplo
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 avisa antes de setTimeout
y luego después de setTimeout
finalmente avisa soy setTimeout
después de 1seg (1000ms)
Lo que puedes notar en el ejemplo es que el setTimeout(...)
es asíncrono, lo que significa que no espera a que el temporizador transcurra antes de pasar a la siguiente sentencia, es decir, alert("after setTimeout");
.
**Ejemplo
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 alerta antes de setInterval
y luego después de setInterval
finalmente alerta soy setInterval
5 veces después de 1seg (1000ms) porque el setTimeout borra el temporizador después de 5 segundos o de lo contrario cada 1 segundo obtendrás alerta soy setInterval
infinitamente.
**¿Cómo hace eso el navegador internamente?
Te lo explicaré brevemente.
Para entenderlo tienes que conocer la cola de eventos en javascript. Hay una cola de eventos implementada en el navegador. Cada vez que un evento se desencadena en js, todos estos eventos (como el clic, etc.) se añaden a esta cola. Cuando el navegador no tiene nada que ejecutar, toma un evento de la cola y lo ejecuta uno por uno.
Ahora, cuando llamas a setTimeout
o setInterval
tu callback se registra en un temporizador en el navegador y se añade a la cola de eventos después de que el tiempo dado expira y, finalmente, javascript toma el evento de la cola y lo ejecuta.
Esto sucede porque el motor de javascript es de un solo hilo y sólo puede ejecutar una cosa a la vez. Por lo tanto, no pueden ejecutar otro javascript y mantener el seguimiento de su temporizador. Es por eso que estos temporizadores se registran con el navegador (el navegador no es de un solo hilo) y puede mantener un seguimiento del temporizador y añadir un evento en la cola después de que el temporizador expira.
Lo mismo ocurre con setInterval
sólo que en este caso el evento se añade 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 retardo que se pasa a estas funciones es el retardo mínimo para ejecutar la llamada de retorno. Esto es porque después de que el temporizador expire el navegador añade el evento a la cola para ser ejecutado por el motor de javascript, pero la ejecución de la llamada de retorno depende de su posición de los eventos en la cola y como el motor es de un solo hilo ejecutará todos los eventos de la cola uno por uno.
Por lo tanto, su devolución de llamada puede a veces tomar más que el tiempo de retardo especificado para ser llamado especialmente cuando su otro código bloquea el hilo y no darle tiempo para procesar lo que hay en la cola.
Y como he mencionado, javascript es un solo hilo. Así que, si bloqueas el hilo por mucho tiempo.
Como este código
while(true) { //infinite loop
}
Su usuario puede recibir un mensaje diciendo página que no responde.