Kuinka asettaa aikaviive javascriptissä

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();
    });
});
Manoj Sharma
Muokattu kysymysT11 kesäkuu 2017 в 9:56
Ohjelmointi
javascript jquery
T44 heinäkuu 2013 в 2:13
17 näkymät
Ratkaisu

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.

jegtugado
Muokattu vastausta T44 lokakuu 2017 в 2:21
Kommentit (2)
 
setTimeout(function(){

}, 500);

Sijoita koodisi { }-koodin sisään.

500 = 0,5 sekuntia

2200 = 2,2 sekuntia

jne.

maudulus
Muokattu vastausta T11 marraskuu 2016 в 8:17
Kommentit (0)

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:

setTimeout setTimeout**

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:

setInterval

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.

Nadir Laskar
Muokattu vastausta T44 kesäkuu 2017 в 6:37
Kommentit (2)