webentwicklung-frage-antwort-db.com.de

So stellen Sie die Zeitverzögerung in Javascript ein

Ich habe ein Stück js in meiner Website, um Bilder zu wechseln, aber ich brauche eine Verzögerung, wenn Sie das Bild ein zweites Mal anklicken. Die Verzögerung sollte 1000ms betragen. Sie würden also auf die Datei img.jpg klicken, dann würde die Datei img_onclick.jpg erscheinen. Sie würden dann auf das Bild img_onclick.jpg klicken, dann sollte es eine Verzögerung von 1000 ms geben, bevor die img.jpg wieder 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();
    });
});
112
Blue Orange

Verwenden Sie setTimeout():

var delayInMilliseconds = 1000; //1 second

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

Wenn Sie dies ohne setTimeout machen wollen: Siehe diese Frage .

277
HIRA THAKUR
setTimeout(function(){


}, 500); 

Geben Sie Ihren Code in den { } ein.

500 = 0,5 Sekunden

2200 = 2,2 Sekunden

usw.

33
maudulus

In JavaScript sind setTimeout und setInterval ( other ) zwei (meist verwendete) Timer-Funktionen vorhanden. 

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

setTimeout wird nach der Verzögerung nur einmal ausgeführt, während setInterval nach jeder Verzögerungs-Milisekunde die Callback-Funktion weiter aufruft.

beide Methoden geben einen ganzzahligen Bezeichner zurück, mit dem sie gelöscht werden können, bevor der Timer abläuft.

clearTimeout und clearInterval Beide Methoden verwenden einen ganzzahligen Bezeichner, der von den obigen Funktionen setTimeout und setInterval zurückgegeben wird.

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 feststellen, dass er before setTimeout und dann after setTimeout eine Warnung ausgibt, und schließlich I am setTimeout nach 1 Sekunde (1000 ms).

Was Sie aus dem Beispiel ersehen können, ist, dass setTimeout(...) asynchron ist, was bedeutet, dass der Timer nicht abgelaufen ist, bevor Sie zur nächsten Anweisung gehen, 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 feststellen, dass er before setInterval und dann after setInterval eine Warnung ausgibt, I am setInterval fünf Mal nach 1 Sekunde (1000 ms), da der Timer nach 5 Sekunden oder nach dem Setzen des Zeitgebers den Timer beendet Andernfalls erhalten Sie alle 1 Sekunde die Warnung I am setInterval unendlich.

Wie macht der Browser das intern?

Ich werde es kurz erklären.

Um zu verstehen, dass Sie die Ereigniswarteschlange in Javascript kennen 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 sie nacheinander aus. 

Wenn Sie nun setTimeout oder setInterval aufrufen, wird Ihr Callback für einen Timer im Browser registriert und nach Ablauf der angegebenen Zeit in die Ereigniswarteschlange eingefügt. Schließlich nimmt Javascript das Ereignis aus der Warteschlange und führt es aus. 

Dies geschieht deshalb, weil die JavaScript-Engine Single-Threading ist und jeweils nur eine Funktion ausführen kann. Sie können also kein anderes Javascript ausführen und Ihren Timer verfolgen. Deshalb werden diese Timer im Browser registriert (Browser sind kein Einzelthread), und sie können den Timer verfolgen und nach Ablauf des Timers ein Ereignis in die Warteschlange einfügen.

dasselbe gilt für setInterval nur in diesem Fall wird das Ereignis nach dem angegebenen Intervall immer wieder zur Warteschlange hinzugefügt, bis es gelöscht oder die Browserseite aktualisiert wird. 

Hinweis

Der Verzögerungsparameter, den Sie an diese Funktionen übergeben, ist die minimale Verzögerung Zeit, um den Rückruf auszuführen. Dies liegt daran, dass nach Ablauf des Timers Der Browser fügt das Ereignis der Warteschlange hinzu, die von .__ ausgeführt werden soll. Javascript-Engine, aber die Ausführung des Rückrufs hängt von Ihrem .__ ab. Ereignisposition in der Warteschlange und da die Engine Single-Thread ist, ___. führt alle Ereignisse in der Warteschlange nacheinander aus.

Daher kann es sein, dass der Rückruf länger als die angegebene Verzögerungszeit dauert, um speziell aufgerufen zu werden, wenn der andere Code den Thread blockiert und ihm nicht die Zeit gibt, die in der Warteschlange enthaltenen Informationen verarbeitet.

Und wie ich schon erwähnte, ist Javascript ein einzelner Thread. Also, wenn Sie den Thread lange blockieren. 

Wie dieser Code

while(true) { //infinite loop 
}

Ihr Benutzer erhält möglicherweise eine Nachricht mit der Aufforderung, Page antwortet nicht.

9
Nadir Laskar

Nachfolgend finden Sie einen Beispielcode, der async/await für eine tatsächliche Verzögerung verwendet.

Es gibt viele Einschränkungen, und dies ist möglicherweise nicht nützlich, aber hier nur zum Spaß 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();

4
Ninjaneer

Ich mache das, um dieses Problem zu lösen. Ich stimme zu, dass dies auf das Timing-Problem zurückzuführen ist und eine Pause zum Ausführen des Codes erforderlich war.

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

Dieser neue Code hält ihn für 1 Sekunde an und führt den Code aus. 

1

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;
    }
  }
}
0
user1188867

Ich gebe meinen Input, weil er mir hilft zu verstehen, was ich mache.

um eine automatische Bildlauf-Diashow mit 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 würden sie zur gleichen Zeit ausgeführt, vorausgesetzt, in setTimeout (nextImage, delayTime) liegt die Verzögerungszeit bei statischen 3000 Millisekunden.

Um dies zu berücksichtigen, habe ich nach jedem Inkrementieren der Schleife über delayTime += timeIncrement; einen zusätzlichen 3000 Milli/s hinzugefügt. 

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;
    }
}
0
user6090272

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

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