Ho questo pezzo di js nel mio sito web per cambiare le immagini ma ho bisogno di un ritardo quando si fa clic sull'immagine una seconda volta. Il ritardo dovrebbe essere di 1000ms. Così si farebbe clic sul img.jpg poi il img_onclick.jpg sarebbe apparso. Si dovrebbe quindi fare clic sull'immagine img_onclick.jpg ci dovrebbe essere un ritardo di 1000ms prima che l'img.jpg è mostrato di nuovo.
Ecco il codice:
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();
});
});
Usa setTimeout()
:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Se vuoi farlo senza setTimeout
: Fai riferimento a questa domanda.
Ci sono due tipi (più usati) di funzioni timer in javascript setTimeout
e setInterval
(altro)
Entrambi questi metodi hanno la stessa firma. Prendono una funzione di richiamo e un tempo di ritardo come parametro.
setTimeout
viene eseguito solo una volta dopo il ritardo mentre setInterval
continua a chiamare la funzione di callback dopo ogni milisec di ritardo.
Entrambi questi metodi restituiscono un identificatore intero che può essere usato per cancellarli prima che il timer scada.
clearTimeout
e clearInterval
entrambi questi metodi prendono un identificatore intero restituito dalle funzioni precedenti setTimeout
e setInterval
.
Esempio:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Se eseguite il codice di cui sopra vedrete che avvisa prima di setTimeout
e poi dopo setTimeout
infine avvisa Sono setTimeout
dopo 1sec (1000ms)
Quello che si può notare dall'esempio è che il setTimeout(...)
è asincrono, il che significa che non aspetta che il timer sia trascorso prima di passare all'istruzione successiva, cioè alert("after setTimeout");
Esempio:
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);
Se eseguite il codice di cui sopra vedrete che avvisa prima di setInterval
e poi dopo setInterval
infine avvisa Sono setInterval
5 volte dopo 1sec (1000ms) perché il setTimeout cancella il timer dopo 5 secondi o altrimenti ogni 1 secondo avrete l'avviso Sono setInterval
Infinitamente.
**Come fa il browser internamente?
Ve lo spiegherò in breve.
Per capirlo dovete conoscere la coda di eventi in javascript. C'è una coda di eventi implementata nel browser. Ogni volta che un evento viene attivato in js, tutti questi eventi (come click ecc.) vengono aggiunti a questa coda. Quando il vostro browser non ha nulla da eseguire, prende un evento dalla coda e li esegue uno per uno.
Ora, quando chiami setTimeout
o setInterval
il tuo callback viene registrato a un timer nel browser e viene aggiunto alla coda di eventi dopo la scadenza del tempo dato e alla fine il javascript prende l'evento dalla coda e lo esegue.
Questo accade perché i motori javascript sono a thread singolo e possono eseguire solo una cosa alla volta. Quindi, non possono eseguire altri javascript e tenere traccia del vostro timer. Ecco perché questi timer sono registrati con il browser (il browser non è a thread singolo) e può tenere traccia del timer e aggiungere un evento nella coda dopo la scadenza del timer.
Lo stesso accade per setInterval
solo che in questo caso l'evento viene aggiunto alla coda ancora e ancora dopo l'intervallo specificato finché non viene cancellato o la pagina del browser non viene aggiornata.
Nota
Il parametro delay che passi a queste funzioni è il ritardo minimo tempo per eseguire la callback. Questo perché dopo la scadenza del timer il browser aggiunge l'evento alla coda per essere eseguito dal motore javascript, ma l'esecuzione del callback dipende dalla posizione degli eventi nella coda e poiché il motore è a thread singolo eseguirà tutti gli eventi nella coda uno per uno.
Quindi, il tuo callback potrebbe a volte richiedere più del tempo di ritardo specificato per essere chiamato specialmente quando il tuo altro codice blocca il thread e non gli dà il tempo di elaborare ciò che è presente nella coda.
E come ho detto javascript è a thread singolo. Quindi, se si blocca il thread per molto tempo.
Come questo codice
while(true) { //infinite loop
}
Il tuo utente potrebbe ricevere un messaggio che dice pagina che non risponde.