So stellen Sie die Zeitverzögerung in Javascript ein

Ich habe dies ein Stück js auf meiner Website, um Bilder zu wechseln, brauche aber eine Verzögerung, wenn Sie ein zweites Mal auf das Bild klicken. Die Verzögerung sollte 1000 ms betragen. Sie würden also auf die Datei img.jpg klicken, dann würde die Datei img_onclick.jpg angezeigt. Sie würden dann auf das Bild img_onclick.jpg klicken. Es sollte dann eine Verzögerung von 1000 ms geben, bevor das Bild img.jpg erneut angezeigt wird.

Hier ist der 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();
    });
});

Verwendung setTimeout():

var delayInMilliseconds = 1000; //1 second

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

Wenn Sie darauf verzichten möchten setTimeout: Lesen Sie diese Frage .

setTimeout(function(){


}, 500); 

Platzieren Sie Ihren Code in der { }

500 = 0,5 Sekunden

2200 = 2,2 Sekunden

etc.

ES-6-Lösung

Unten finden Sie einen Beispielcode, der aync / await verwendet , um eine tatsächliche Verzögerung zu erhalten.

Es gibt viele Einschränkungen und dies ist möglicherweise nicht nützlich, aber nur zum Spaß hier zu posten.

    async function delay(delayInms) {
      return new Promise(resolve  => {
        setTimeout(() => {
          resolve(2);
        }, delayInms);
      });
    }
    async function sample() {
      console.log('a');
      console.log('waiting...')
      let delayres = await delay(3000);
      console.log('b');
    }
    sample();

Es gibt zwei (meistens verwendete) Arten von Timerfunktionen in Javascript setTimeoutund setInterval( andere )

Beide Methoden haben dieselbe Signatur. Sie übernehmen eine Rückruffunktion und die Verzögerungszeit als Parameter.

setTimeoutWird nur einmal nach der Verzögerung ausgeführt, während setIntervaldie Rückruffunktion nach jeder Verzögerung weiter aufgerufen wird.

Beide Methoden geben eine Ganzzahl-ID zurück, mit der sie gelöscht werden können, bevor der Timer abläuft.

clearTimeoutund clearIntervaldiese beiden Methoden verwenden eine Ganzzahlkennung, die von den obigen Funktionen setTimeoutund zurückgegeben wirdsetInterval

Beispiel:

setTimeout

alert("before setTimeout");

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

  alert("after setTimeout");

Wenn Sie den obigen Code ausführen, werden Sie sehen, dass es Warnungen gibt before setTimeout und after setTimeoutschließlich I am setTimeoutnach 1 Sekunde (1000 ms).

Was Sie dem Beispiel entnehmen können, ist, dass das setTimeout(...)asynchron ist, was bedeutet, dass es nicht darauf wartet, dass der Timer abgelaufen ist, bevor es zur nächsten Anweisung übergeht, d. H.alert("after setTimeout");

Beispiel:

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

Wenn Sie den obigen Code ausführen, werden Sie sehen, dass er alarmiert before setIntervalund after setIntervalschließlich alarmiertI am setInterval feststellen, ausgibt, 5 Mal nach 1 Sekunde (1000 ms), da das setTimeout den Timer nach 5 Sekunden löscht, oder alle 1 Sekunde erhalten Sie eine I am setIntervalunendliche Warnung .

Wie macht der Browser das intern?

Ich werde es kurz erklären.

Um zu verstehen, dass Sie über die Ereigniswarteschlange in Javascript Bescheid wissen müssen. Im Browser ist eine Ereigniswarteschlange implementiert. Immer wenn ein Ereignis in js ausgelöst wird, werden alle diese Ereignisse (wie Klick usw.) zu dieser Warteschlange hinzugefügt. Wenn Ihr Browser nichts auszuführen hat, nimmt er ein Ereignis aus der Warteschlange und führt es einzeln aus.

Nun, wenn Sie anrufen setTimeoutodersetInterval Ihr Rückruf bei einem Timer im Browser registriert wird und dieser nach Ablauf der angegebenen Zeit zur Ereigniswarteschlange hinzugefügt wird, nimmt Javascript das Ereignis aus der Warteschlange und führt es aus.

Dies geschieht, weil die Javascript-Engine Single-Threaded ist und jeweils nur eine Sache ausführen kann. Sie können also kein anderes Javascript ausführen und Ihren Timer verfolgen. Aus diesem Grund sind diese Timer beim Browser registriert (Browser sind keine Single-Threaded-Timer) und können den Timer verfolgen und nach Ablauf des Timers ein Ereignis in die Warteschlange einfügen.

Gleiches gilt setIntervalnur in diesem Fall, wenn das Ereignis nach dem angegebenen Intervall immer wieder zur Warteschlange hinzugefügt wird, bis es gelöscht oder die Browserseite aktualisiert wird.

Hinweis

Der Verzögerungsparameter, den Sie an diese Funktionen übergeben, ist die minimale Verzögerungszeit für die Ausführung des Rückrufs. Dies liegt daran, dass der Browser nach Ablauf des Timers das Ereignis zur Warteschlange hinzufügt, die von der Javascript-Engine ausgeführt werden soll. Die Ausführung des Rückrufs hängt jedoch von Ihrer Ereignisposition in der Warteschlange ab. Da die Engine ein Single-Thread ist, werden alle Ereignisse in ausgeführt die Warteschlange eins nach dem anderen.

Daher kann es manchmal länger als die angegebene Verzögerungszeit dauern, bis Ihr Rückruf aufgerufen wird, insbesondere wenn Ihr anderer Code den Thread blockiert und ihm keine Zeit gibt, um zu verarbeiten, was sich in der Warteschlange befindet.

Und wie gesagt, Javascript ist ein einzelner Thread. Also, wenn Sie den Thread für lange blockieren.

Wie dieser Code

while(true) { //infinite loop 
}

Ihr Benutzer erhält möglicherweise eine Nachricht, dass die Seite nicht antwortet .

Für Synchronisierungsaufrufe können Sie die folgende Methode verwenden:

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Wenn Sie eine Aktualisierung benötigen, ist dies eine weitere Möglichkeit:

setTimeout(function () { 
    $("#jsSegurosProductos").jsGrid("refresh"); 
}, 1000);

Hier ist, was ich tue, um dieses Problem zu lösen. Ich bin damit einverstanden, dass dies auf das Timing-Problem zurückzuführen ist und eine Pause benötigt, um den Code auszuführen.

var delayInMilliseconds = 1000; 
setTimeout(function() {
 //add your code here to execute
 }, delayInMilliseconds);

Dieser neue Code hält ihn 1 Sekunde lang an und führt in der Zwischenzeit Ihren Code aus.

Ich werde meinen Input geben, weil es mir hilft zu verstehen, was ich tue.

Um eine Diashow mit automatischem Bildlauf und einer Wartezeit von 3 Sekunden zu erstellen, habe ich Folgendes getan:

var isPlaying = true;

function autoPlay(playing){
   var delayTime = 3000;
   var timeIncrement = 3000;

   if(playing){
        for(var i=0; i<6; i++){//I have 6 images
            setTimeout(nextImage, delayTime);
            delayTime += timeIncrement;
        }
        isPlaying = false;

   }else{
       alert("auto play off");
   }
}

autoPlay(isPlaying);

Denken Sie daran, wenn Sie setTimeout () wie folgt ausführen. Alle Timeout-Funktionen werden so ausgeführt, als ob sie gleichzeitig ausgeführt würden, vorausgesetzt, dass in setTimeout (nextImage, delayTime) die Verzögerungszeit statische 3000 Millisekunden beträgt.

Um dies zu berücksichtigen, fügte ich nach jeder zusätzlichen 3000 Milli / s für die Schleifeninkrementierung über hinzu delayTime += timeIncrement; .

Für diejenigen, die sich hier interessieren, sieht mein nextImage () so aus:

function nextImage(){
    if(currentImg === 1){//change to img 2
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[1].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[1];
        imgDescription.innerHTML = imgDescText[1];

        currentImg = 2;
    }
    else if(currentImg === 2){//change to img 3
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[2].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[2];
        imgDescription.innerHTML = imgDescText[2];

        currentImg = 3;
    }
    else if(currentImg === 3){//change to img 4
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[3].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[3];
        imgDescription.innerHTML = imgDescText[3];

        currentImg = 4;
    }
    else if(currentImg === 4){//change to img 5
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[4].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[4];
        imgDescription.innerHTML = imgDescText[4];

        currentImg = 5;
    }
    else if(currentImg === 5){//change to img 6
    for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[5].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[5];
        imgDescription.innerHTML = imgDescText[5];

        currentImg = 6;
    }
    else if(currentImg === 6){//change to img 1
        for(var i=0; i<6; i++){
            images[i].style.zIndex = "0";
        }
        images[0].style.zIndex = "1";
        imgNumber.innerHTML = imageNumber_Text[0];
        imgDescription.innerHTML = imgDescText[0];

        currentImg = 1;
    }
}