Jeg har dette et stykke js på nettstedet mitt for å bytte bilder, men trenger en forsinkelse når du klikker på bildet en gang til. Forsinkelsen skal være 1000ms. Så du vil klikke på img.jpg og deretter vises img_onclick.jpg. Deretter klikker du på img_onclick.jpg-bildet, og det skal være en forsinkelse på 1000 ms før img.jpg vises igjen.
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();
});
});
Bruk setTimeout()
:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Hvis du vil gjøre det uten setTimeout
: Se dette spørsmålet.
Det er to (mest brukte) typer timerfunksjoner i javascript setTimeout
og setInterval
(annet)
Begge disse metodene har samme signatur. De tar en tilbakeringingsfunksjon og forsinkelsestid som parameter.
setTimeout
utføres bare én gang etter forsinkelsen, mens setInterval
fortsetter å kalle tilbakekallingsfunksjonen etter hver forsinkelse i milisekunder.
Begge disse metodene returnerer en heltallsidentifikator som kan brukes til å slette dem før timeren utløper.
clearTimeout
og clearInterval
begge disse metodene tar en heltallsidentifikator returnert fra ovennevnte funksjoner setTimeout
og setInterval
.
Eksempel:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Hvis du kjører koden ovenfor, vil du se at den varsler før setTimeout
og deretter etter setTimeout
til slutt varsler den Jeg er setTimeout
etter 1sek (1000ms).
Det du kan legge merke til fra eksemplet er at setTimeout(...)
er asynkron, noe som betyr at den ikke venter på at timeren skal være utløpt før du går til neste uttalelse, 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 kjører koden ovenfor, vil du se at den varsler før setInterval
og deretter etter setInterval
til slutt varsler den Jeg er setInterval
5 ganger etter 1 sekund (1000 ms) fordi setTimeout tømmer timeren etter 5 sekunder, ellers vil du hvert 1 sekund få varsel Jeg er setInterval
uendelig.
**Hvordan gjør nettleseren det internt?
Jeg vil forklare kort.
For å forstå det må du vite om hendelseskøen i javascript. Det er en hendelseskø implementert i nettleseren. Hver gang en hendelse utløses i js, blir alle disse hendelsene (som klikk osv.) Lagt til i denne køen. Når nettleseren din ikke har noe å utføre, tar den en hendelse fra køen og utfører dem en etter en.
Nå, når du kaller setTimeout
eller setInterval
, blir tilbakeringingen din registrert til en tidtaker i nettleseren, og den blir lagt til hendelseskøen etter at den gitte tiden utløper, og til slutt tar javascript hendelsen fra køen og utfører den.
Dette skjer slik, fordi javascript-motoren er enkelttrådet og de kan bare utføre en ting om gangen. Så de kan ikke utføre annet javascript og holde oversikt over tidtakeren din. Derfor er disse tidtakerne registrert i nettleseren (nettleseren er ikke enkelttrådet), og den kan holde oversikt over tidtakeren og legge til en hendelse i køen etter at tidtakeren utløper.
Det samme skjer for setInterval
bare i dette tilfellet blir hendelsen lagt til i køen igjen og igjen etter det angitte intervallet til den blir slettet eller nettlesersiden oppdateres.
Note
Forsinkelseparameteren du sender til disse funksjonene er minimumsforsinkelsen. tid for å utføre tilbakeringingen. Dette er fordi etter at timeren utløper nettleseren legger til hendelsen i køen som skal utføres av javascript-motoren, men utførelsen av tilbakeringingen avhenger av din hendelsenes posisjon i køen, og ettersom motoren er enkelttrådet, vil den vil utføre alle hendelsene i køen en etter en.
Derfor kan tilbakeringingen din noen ganger ta mer enn den angitte forsinkelsestiden for å bli kalt spesielt når den andre koden din blokkerer tråden og ikke gir den tid til å behandle det som er der i køen.
Og som jeg nevnte javascript er enkelttråd. Så hvis du blokkerer tråden for lenge.
Som denne koden
while(true) { //infinite loop
}
Brukeren kan få en melding om at siden ikke svarer.