Jeg har et stykke js på mit websted til at skifte billeder, men jeg har brug for en forsinkelse, når du klikker på billedet anden gang. Forsinkelsen skal være 1000ms. Så du ville klikke på img.jpg og derefter ville img_onclick.jpg blive vist. Du ville derefter klikke på img_onclick.jpg billedet der skal derefter være en forsinkelse på 1000ms før img.jpg vises igen.
Her er koden:
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();
});
});
Brug setTimeout()
:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Hvis du ønsker at gøre det uden setTimeout
: Se dette spørgsmål.
Der findes to (mest anvendte) typer timer-funktioner i javascript setTimeout
og setInterval
(other)
Begge disse metoder har samme signatur. De tager en call back-funktion og forsinkelsestid som parameter.
setTimeout
udføres kun én gang efter forsinkelsen, mens setInterval
bliver ved med at kalde callback-funktionen efter hver milisecs forsinkelse.
Begge disse metoder returnerer en heltalsidentifikator, som kan bruges til at slette dem, inden timeren udløber.
clearTimeout
og clearInterval
begge disse metoder tager en helhedsidentifikator, der returneres fra ovenstående funktioner setTimeout
og setInterval
.
Eksempel:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Hvis du kører ovenstående kode vil du se, at den advarer før setTimeout
og derefter efter setTimeout
og endelig advarer den Jeg er setTimeout
efter 1sek (1000ms)
Det du kan bemærke i eksemplet er, at setTimeout(...)
er asynkron, hvilket betyder, at den ikke venter på, at timeren er udløbet, før den går til den næste erklæring, dvs. alert("after setTimeout");
.
Eksempel:
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);
Hvis du kører ovenstående kode vil du se, at den advarer før setInterval
og derefter efter setInterval
endelig advarer den Jeg er setInterval
5 gange efter 1sek (1000ms) fordi setTimeout rydder timeren efter 5 sekunder, ellers vil du hvert 1 sekund få advarsel Jeg er setInterval
i det uendelige.
Hvordan browser internt gør det?
Jeg vil forklare kort.
For at forstå det skal du vide noget om event queue i javascript. Der er en eventkø implementeret i browseren. Når en begivenhed udløses i js, tilføjes alle disse begivenheder (som klik osv... ) til denne kø. Når din browser ikke har noget at udføre, tager den en begivenhed fra køen og udfører dem en efter en.
Når du kalder setTimeout
eller setInterval
, bliver din callback registreret til en timer i browseren, og den bliver tilføjet til eventkøen efter udløbet af den givne tid, og til sidst tager javascript eventen fra køen og udfører den.
Dette sker, fordi javascript-motoren er single threaded, og de kan kun udføre én ting ad gangen. Så de kan ikke udføre andet javascript og holde styr på din timer. Det er derfor, at disse timere er registreret i browseren (browseren er ikke single threaded), og den kan holde styr på timeren og tilføje en begivenhed i køen, når timeren udløber.
Det samme sker for setInterval
, men i dette tilfælde tilføjes begivenheden til køen igen og igen efter det angivne interval, indtil den bliver slettet eller browsersiden opdateres.
Note
Den forsinkelsesparameter, som du overfører til disse funktioner, er den mindste forsinkelse tid til at udføre callbacken. Dette skyldes, at når timeren udløber tilføjer browseren begivenheden til køen for at blive udført af javascript-maskinen, men udførelsen af callbacken afhænger af din begivenhedernes position i køen, og da motoren er single threaded, er det vil udføre alle begivenheder i køen én efter én.
Derfor kan din callback nogle gange tage mere end den angivne forsinkelsestid for at blive kaldt, især når din anden kode blokerer tråden og ikke giver den tid til at behandle det, der er i køen.
Og som jeg nævnte javascript er single thread. Så hvis du blokerer tråden i lang tid.
Som denne kode
while(true) { //infinite loop
}
Din bruger kan få en besked, der siger side svarer ikke.