Hoe een vertraging in javascript in te stellen

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

Antwoord 4, autoriteit 4%

Er zijn twee (meestal gebruikte) typen timerfuncties in javascript setTimeouten setInterval(overig)

Beide methoden hebben dezelfde handtekening. Ze nemen een terugbelfunctie en vertragingstijd als parameter.

setTimeoutwordt slechts één keer uitgevoerd na de vertraging, terwijl setIntervalde callback-functie blijft aanroepen na elke vertraging in millisecs.

beide methoden retourneren een geheel getal dat kan worden gebruikt om ze te wissen voordat de timer afloopt.

clearTimeouten clearIntervalbeide methoden gebruiken een geheel getal dat wordt geretourneerd door de bovenstaande functies setTimeouten 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, ziet u dat deze een waarschuwing geeft before setTimeouten vervolgens after setTimeoutten slotte waarschuwt het I am setTimeoutna 1sec (1000ms)

Wat je aan het voorbeeld kunt zien, is dat de setTimeout(...)asynchroon is, wat betekent dat het niet wacht tot de timer is verstreken voordat het naar de volgende instructie gaat, bijv. 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 u de bovenstaande code uitvoert, ziet u dat deze before setIntervalwaarschuwt en vervolgens after setIntervalten slotte waarschuwt het I am setInterval5 keer na 1sec (1000ms) omdat de setTimeout de timer na 5 seconden wist, anders krijg je elke 1 seconde een waarschuwing I am setIntervalOneindig.

Hoe doet de browser dat intern?

Ik zal het in het kort uitleggen.

Om dat te begrijpen, moet u weten over de gebeurteniswachtrij in javascript. Er is een gebeurteniswachtrij geïmplementeerd in de browser. Telkens wanneer een gebeurtenis wordt geactiveerd in js, worden al deze gebeurtenissen (zoals klikken enz.) aan deze wachtrij toegevoegd. Wanneer uw browser niets heeft om uit te voeren, haalt hij een gebeurtenis uit de wachtrij en voert deze één voor één uit.

Als u nu setTimeoutof setIntervalaanroept, wordt uw callback geregistreerd bij een timer in de browser en wordt deze toegevoegd aan de gebeurteniswachtrij nadat de opgegeven tijd is verstreken en uiteindelijk javascript haalt de gebeurtenis uit de wachtrij en voert deze uit.

Dit gebeurt zo, omdat de javascript-engine single-threaded is en maar één ding tegelijk kan uitvoeren. Ze kunnen dus geen ander javascript uitvoeren en uw timer bijhouden. Dat is de reden waarom deze timers zijn geregistreerd bij de browser (browser is niet single threaded) en het kan de timer bijhouden en een gebeurtenis toevoegen aan de wachtrij nadat de timer is verlopen.

hetzelfde gebeurt voor setInterval, alleen in dit geval wordt de gebeurtenis keer op keer toegevoegd aan de wachtrij na het opgegeven interval totdat deze wordt gewist of de browserpagina wordt vernieuwd.

Opmerking

De vertragingsparameter die u aan deze functies doorgeeft, is de minimale vertraging
tijd om het terugbellen uit te voeren. Dit komt omdat nadat de timer afloopt
de browser voegt de gebeurtenis toe aan de wachtrij die moet worden uitgevoerd door de
javascript-engine, maar de uitvoering van de callback hangt af van uw
gebeurtenissen positie in de wachtrij en aangezien de engine single threaded is
voert alle gebeurtenissen in de wachtrij één voor één uit.

Vandaar dat uw callback soms meer duurt dan de gespecificeerde vertragingstijd die speciaal wordt genoemd wanneer uw andere code de draad blokkeert en het geen tijd geeft om te verwerken wat er in de wachtrij is.

En zoals ik noemde JavaScript is enkele draad. Dus, als je de draad lang blokkeert.

Zoals deze code

while(true) { //infinite loop 
}

Uw gebruiker kan een bericht krijgen dat u -pagina niet reageert, niet reageert .

Antwoord 5, Autoriteit 2%

Voor synchronisatie-oproepen kunt u de onderstaande methode gebruiken:

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

Antwoord 6, Autoriteit 2%

U kunt de belofte

gebruiken

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

Gebruik vervolgens deze methode

console.log("Hello");
sleep(2000).then(() => { console.log("World!"); });

of

console.log("Hello");
await sleep(2000);
console.log("World!");

Antwoord 7

Als u vernieuwing nodig heeft, is dit een andere mogelijkheid:

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

Antwoord 8

Dit is wat ik doe om dit probleem op te lossen. Ik ben het ermee eens dat dit komt door het timingprobleem en dat er een pauze nodig was om de code uit te voeren.

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

Deze nieuwe code pauzeert deze voor 1 seconde en voert ondertussen uw code uit.

Antwoord 9

Ik geef mijn input omdat het me helpt te begrijpen wat ik aan het doen ben.

Om een automatisch scrollende diavoorstelling te maken met een wachttijd van 3 seconden, heb ik het volgende gedaan:

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

Onthoud dat bij het uitvoeren van setTimeout() als volgt; het zal alle time-outfuncties uitvoeren alsof ze tegelijkertijd worden uitgevoerd, ervan uitgaande dat in setTimeout(nextImage, delayTime);delay time een statische 3000 milliseconden is.

Wat ik deed om dit te verklaren, was een extra 3000 milli/s toevoegen na elke for-lusverhoging via delayTime += timeIncrement;.

Voor degenen die erom geven, dit is hoe mijn nextImage() eruit ziet:

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