Hoe tijdvertraging instellen in javascript

Ik heb dit een stukje js in mijn website om afbeeldingen te wisselen maar heb een vertraging nodig wanneer je een tweede keer op de afbeelding klikt. De vertraging moet 1000ms zijn. Dus je zou klikken op de img.jpg dan de img_onclick.jpg zou verschijnen. Je zou dan klikken op de img_onclick.jpg afbeelding er moet dan een vertraging van 1000ms zijn voordat de img.jpg weer wordt getoond.

Hier is de code:

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
Bewerkte vraag 27ste1 juni 2017 в 9:56
Programmering
javascript jquery
26ste4 juli 2013 в 2:13
18 views
Oplossing

Gebruik setTimeout():

var delayInMilliseconds = 1000; //1 second

setTimeout(function() {
  //your code to be executed after 1 second
}, delayInMilliseconds);

Als je het zonder setTimeout wilt doen: Raadpleeg dan deze vraag.

jegtugado
Bewerkt antwoord 27ste4 oktober 2017 в 2:21
Commentaren (2)
 
setTimeout(function(){

}, 500);

Plaats uw code binnen de `{ }``

500 = 0.5 seconden

2200 = 2.2 seconden

enz.

maudulus
Bewerkt antwoord 29ste1 november 2016 в 8:17
Commentaren (0)

Er zijn twee (meestal gebruikte) types van timer functies in javascript setTimeout en setInterval (other)

Beide methoden hebben dezelfde signatuur. Ze nemen een call back functie en vertragingstijd als parameter.

setTimeout wordt slechts een keer uitgevoerd na de vertraging terwijl setInterval de callback functie blijft aanroepen na elke vertraging milisecs.

Beide methodes geven een integer identifier terug die kan worden gebruikt om ze te wissen voordat de timer afloopt.

clearTimeout en clearInterval deze beide methodes nemen een integer identifier uit de bovenstaande functies setTimeout en setInterval

Voorbeeld:

setTimeout

alert("before setTimeout");

setTimeout(function(){
        alert("I am setTimeout");
   },1000); //delay is in milliseconds 

  alert("after setTimeout");

Als u de bovenstaande code uitvoert zult u zien dat het voor setTimeout waarschuwt en dan na setTimeout tenslotte waarschuwt het Ik ben setTimeout na 1sec (1000ms)

Wat je kunt zien in het voorbeeld is dat de setTimeout(...) asynchroon is, wat betekent dat het niet wacht tot de timer is verstreken voordat het naar het volgende statement gaat, dat wil zeggen alert("after setTimeout");

Voorbeeld:

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

Als je de bovenstaande code uitvoert zul je zien dat het voor setInterval waarschuwt en dan na setInterval tenslotte waarschuwt het Ik ben setInterval 5 keer na 1sec (1000ms) omdat de setTimeout de timer na 5 seconden opruimt anders krijg je elke 1 seconde een waarschuwing Ik ben setInterval Oneindig.

Hoe browser intern doet dat?

Ik zal het in het kort uitleggen.

Om dat te begrijpen moet je iets weten over gebeurtenis wachtrij in javascript. Er is een gebeurtenis wachtrij geïmplementeerd in de browser. Wanneer een gebeurtenis wordt geactiveerd in javascript, worden al deze gebeurtenissen (zoals klik enz..) toegevoegd aan deze wachtrij. Wanneer de browser niets uit te voeren heeft, neemt hij een gebeurtenis uit de wachtrij en voert ze een voor een uit.

Wanneer je setTimeout of setInterval aanroept, wordt je callback geregistreerd als een timer in de browser en het wordt toegevoegd aan de gebeurtenis wachtrij nadat de gegeven tijd is verstreken en uiteindelijk neemt javascript de gebeurtenis uit de wachtrij en voert het uit.

Dit gebeurt zo, omdat javascript motoren single threaded zijn en ze kunnen maar een ding tegelijk uitvoeren. Dus, ze kunnen niet uitvoeren van andere javascript en bijhouden van uw timer. Dat is de reden waarom deze timers zijn geregistreerd bij de browser (browser zijn niet single threaded) en het kan bijhouden van de timer en voeg een evenement in de wachtrij na de timer afloopt.

Hetzelfde gebeurt voor setInterval alleen in dit geval wordt de gebeurtenis toegevoegd aan de wachtrij opnieuw en opnieuw na het opgegeven interval totdat het wordt gewist of de browser pagina wordt ververst.

Note

De vertragingsparameter die u aan deze functies doorgeeft is de minimale vertraging tijd om de callback uit te voeren. Dit is omdat na het verstrijken van de timer voegt de browser de gebeurtenis toe aan de wachtrij om te worden uitgevoerd door de javascript engine, maar de uitvoering van de callback hangt af van uw van je gebeurtenissen positie in de wachtrij en als de motor is single threaded het zal het alle gebeurtenissen in de wachtrij een voor een uitvoeren.

Vandaar dat uw callback soms meer dan de opgegeven vertragingstijd kan duren om te worden opgeroepen, vooral wanneer uw andere code de draad blokkeert en het geen tijd geeft om te verwerken wat'er in de wachtrij staat.

En zoals ik al zei javascript is single thread. Dus, als je de draad voor lang blokkeert.

Zoals deze code

while(true) { //infinite loop 
}

Uw gebruiker kan een bericht krijgen dat zegt pagina reageert niet.

Nadir Laskar
Bewerkt antwoord 9de4 juni 2017 в 6:37
Commentaren (2)