Zet een vertraging in Javascript

Ik moet een vertraging van ongeveer 100 milliseconden toevoegen aan mijn Javascript-code, maar ik wil de functie setTimeoutvan het window-object niet gebruiken en dat doe ik niet t u een bezet-lus wilt gebruiken. Heeft iemand suggesties?


Antwoord 1, autoriteit 100%

Helaas is setTimeout()de enige betrouwbaremanier (niet de enige manier, maar de enige betrouwbaremanier) om de uitvoering te pauzeren van het script zonder de gebruikersinterface te blokkeren.

Het is eigenlijk niet zo moeilijk om te gebruiken, in plaats van dit te schrijven:

var x = 1;
// Place mysterious code that blocks the thread for 100 ms.
x = x * 3 + 2;
var y = x / 2;

je gebruikt setTimeout()om het op deze manier te herschrijven:

var x = 1;
var y = null; // To keep under proper scope
setTimeout(function() {
    x = x * 3 + 2;
    y = x / 2;
}, 100);

Ik begrijp dat het gebruik van setTimeout()meer aandacht vraagt dan een gewenste sleep()-functie, maar helaas bestaat de laatste niet. Er zijn veel tijdelijke oplossingen om dergelijke functies te implementeren. Sommige gebruiken drukke loops:

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

anderen die een XMLHttpRequestgebruiken met een serverscript dat een tijdje slaapt voordat een resultaat wordt geretourneerd.

Helaas zijn dit tijdelijke oplossingen en zullen ze waarschijnlijk andere problemen veroorzaken (zoals het vastlopen van browsers). Het wordt aanbevolen om gewoon de aanbevolen manier te volgen, namelijk setTimeout()).


Antwoord 2, autoriteit 13%

Als je akkoord gaat met ES2017, is awaitgoed:

const DEF_DELAY = 1000;
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms || DEF_DELAY));
}
await sleep(100);

Houd er rekening mee dat het gedeelte awaiteen asynchrone functie moet hebben:

//IIAFE (immediately invoked async function expression)
(async()=>{
  //Do some stuff
  await sleep(100);
  //Do some more stuff
})()

Antwoord 3, autoriteit 10%

Ik had net een probleem waarbij ik dit goed moest oplossen.

Via Ajax krijgt een script X (0-10) berichten.
Wat ik wilde doen:
Voeg elke 10 seconden een bericht toe aan de DOM.

de code waarmee ik eindigde:

$.each(messages, function(idx, el){
  window.setTimeout(function(){
    doSomething(el);
  },Math.floor(idx+1)*10000);
});

Beschouw de time-outs als een “tijdlijn” van uw script.

Dit is wat we WILLEN coderen:

DoSomething();
WaitAndDoNothing(5000);
DoSomethingOther();
WaitAndDoNothing(5000);
DoEvenMore();

ZO MOETEN WE HET AAN DE JAVASCRIPT VERTELLEN:

At Runtime 0    : DoSomething();
At Runtime 5000 : DoSomethingOther();
At Runtime 10000: DoEvenMore();

Hopelijk helpt dit.


Antwoord 4, autoriteit 2%

Eigenlijk is alleen setTimeoutgoed voor die taak en normaal gesproken kun je geen exacte vertragingen instellen met niet-bepaalde methoden als drukke lussen.


Antwoord 5

Deze threadheeft een goede discussie en een handige oplossing:

function pause( iMilliseconds )
{
    var sDialogScript = 'window.setTimeout( function () { window.close(); }, ' + iMilliseconds + ');';
    window.showModalDialog('javascript:document.writeln ("<script>' + sDialogScript + '<' + '/script>")');
}

Helaas lijkt het erop dat dit niet werkt in sommige versies van IE, maar de thread heeft vele andere waardige voorstellen als dat een probleem voor je blijkt te zijn.


Antwoord 6

Gebruik een AJAX-functie die een php-pagina synchroon aanroept en dan kun je op die pagina de php usleep()-functie plaatsen die als een vertraging zal fungeren.

function delay(t){
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","http://www.hklabs.org/files/delay.php?time="+t,false);
//This will call the page named delay.php and the response will be sent to a division with ID as "response"
xmlhttp.send();
document.getElementById("response").innerHTML=xmlhttp.responseText;
}

http://www.hklabs.org/articles/put-delay- in-javascript

Other episodes