Slik angir du tidsforsinkelse i javascript

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();
    });
});
Manoj Sharma
Redigerte spørsmål 27. juni 2017 в 9:56
Programmering
javascript jquery
26. juli 2013 в 2:13
7 visninger
Løsning

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.

jegtugado
Redigert svar 27. oktober 2017 в 2:21
Kommentarer (2)
 
setTimeout(function(){

}, 500);

Plasser koden din inne i { }

500 = 0,5 sekunder

2200 = 2,2 sekunder

osv.

maudulus
Redigert svar 29. november 2016 в 8:17
Kommentarer (0)

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:

setTimeout setTimeout

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:

setInterval 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);

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.

Nadir Laskar
Redigert svar 9. juni 2017 в 6:37
Kommentarer (2)