Minulla on tämä pala js minun verkkosivuilla vaihtaa kuvia, mutta tarvitsevat viiveen, kun napsautat kuvaa toisen kerran. Viiveen pitäisi olla 1000 ms. Joten klikkaat img.jpg:tä ja sitten img_onclick.jpg tulee näkyviin. Sitten klikkaat img_onclick.jpg kuvaa, jonka jälkeen pitäisi olla 1000 ms viive ennen kuin img.jpg näkyy uudelleen.
Tässä on koodi:
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();
});
});
Käytä setTimeout()
:
var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
//your code to be executed after 1 second
}, delayInMilliseconds);
Jos haluat tehdä sen ilman setTimeout
: Katso tämä kysymys.
Javascriptissä on kaksi (useimmiten käytettyä) ajastinfunktiotyyppiä setTimeout
ja setInterval
(other).
Molemmilla menetelmillä on sama allekirjoitus. Ne ottavat parametrina takaisinsoittofunktion ja viiveajan.
setTimeout
suoritetaan vain kerran viiveen jälkeen, kun taas setInterval
kutsuu takaisinsoittofunktiota jatkuvasti jokaisen viiveen millisekunnin jälkeen.
Molemmat menetelmät palauttavat kokonaislukutunnisteen, jota voidaan käyttää niiden tyhjentämiseen ennen ajastimen päättymistä.
clearTimeout
ja clearInterval
Molemmat metodit ottavat kokonaislukutunnisteen, joka palautetaan edellä mainituista funktioista setTimeout
ja setInterval
.
Esimerkki:
alert("before setTimeout");
setTimeout(function(){
alert("I am setTimeout");
},1000); //delay is in milliseconds
alert("after setTimeout");
Jos suoritat yllä olevan koodin, huomaat, että se hälyttää ennen setTimeout
ja sitten jälkeen setTimeout
ja lopuksi se hälyttää I am setTimeout
1 sekunnin (1000ms) jälkeen.
Esimerkistä voi huomata, että setTimeout(...)
on asynkroninen, mikä tarkoittaa, että se ei odota ajastimen päättymistä ennen kuin siirtyy seuraavaan lausekkeeseen eli alert("after setTimeout");
.
Esimerkki:
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);
Jos suoritat yllä olevan koodin, huomaat, että se hälyttää before setInterval
ja sitten after setInterval
lopuksi se hälyttää I am setInterval
5 kertaa 1 sekunnin (1000ms) jälkeen, koska setTimeout tyhjentää ajastimen 5 sekunnin jälkeen tai muuten saat hälytyksen I am setInterval
loputtomasti joka 1 sekunti.
Miten selain sisäisesti tekee sen?
Selitän lyhyesti.
Ymmärtääksesi tämän sinun on tiedettävä javascriptin tapahtumajonosta. Selaimessa on toteutettu tapahtumajono. Aina kun js:ssä käynnistyy jokin tapahtuma, kaikki nämä tapahtumat (kuten klikkaus jne...) lisätään tähän jonoon. Kun selaimella ei ole mitään suoritettavaa, se ottaa tapahtuman jonosta ja suorittaa ne yksi kerrallaan.
Kun kutsut setTimeout
tai setInterval
, takaisinkutsu rekisteröidään selaimen ajastimeen, ja se lisätään tapahtumajonoon, kun annettu aika on kulunut, ja lopulta javascript ottaa tapahtuman jonosta ja suorittaa sen.
Näin tapahtuu, koska javascript-moottori on yksisäikeinen ja se voi suorittaa vain yhden asian kerrallaan. Ne eivät siis voi suorittaa muita javascript-ohjelmia ja seurata ajastimesi toimintaa. Siksi nämä ajastimet rekisteröidään selaimeen (selain ei ole yksisäikeinen), ja se voi seurata ajastinta ja lisätä tapahtuman jonoon ajastimen päättymisen jälkeen.
Sama tapahtuu myös setInterval
-ajastimen kohdalla, mutta tässä tapauksessa tapahtuma lisätään jonoon uudelleen ja uudelleen määritellyn ajanjakson jälkeen, kunnes se tyhjennetään tai selaimen sivu päivitetään.
Huomautus
Näille funktioille annettava viiveparametri on vähimmäisviive. aika takaisinkutsun suorittamiseen. Tämä johtuu siitä, että ajastimen päättymisen jälkeen selain lisää tapahtuman jonoon suoritettavaksi funktiolla >. javascript-moottoriin, mutta takaisinkutsun suorittaminen riippuu sinun tapahtumien sijainnista jonossa, ja koska moottori on yksisäikeinen, se on suorittaa kaikki jonossa olevat tapahtumat yksi kerrallaan.
Näin ollen takaisinkutsu voi joskus kestää enemmän kuin määritetty viiveaika kutsua erityisesti silloin, kun muu koodisi estää säiettä eikä anna sille aikaa käsitellä sitä, mitä jonossa on.
Ja kuten mainitsin, javascript on yksisäikeinen. Joten jos estät säikeen pitkäksi aikaa.
Kuten tämä koodi
while(true) { //infinite loop
}
Käyttäjä saattaa saada viestin, jossa sanotaan sivu ei vastaa.