Wie eine JavaScript-Funktion schreiben, die gegebene Millisekunden

Question

warten

Was ich habe versucht, eine Funktion schreiben zu tun wie:

function delay(delay){ 
    var date = new Date(); 
    var startTime = date.getTime(); 


    var currDate=new Date(); 
    var current=currDate.getTime(); 

    while (current<=startTime+delay){ 
     currDate=new Date(); 
     current=currDate.getTime(); 
    } 
} 

Dieser Code perfekt zu funktionieren scheint, wenn etwas so

tut

console.log("1"); 
delay(500); 
console.log("2"); 

Wenn Sie so etwas tun, wird es auf die Konsole 1 ausgedruckt, warten Sie dann eine halbe Sekunde, und drucken Sie dann 2. Das Problem ist, dass ich nicht console.log möchte, möchte ich document.getElementById("id").innerHTML+="a";. Beim Versuch, die Verzögerungsfunktion zu umgehen, wartet die Seite darauf, dass alle Verzögerungen beendet sind, bevor eine der AS geladen wird.

Meine Frage ist folgende:

Gibt es eine gute Möglichkeit, eine solche Funktion zu entweder schreiben, oder gibt es bereits eine Funktion, dass alle vorherigen Code ausführen lassen kann, verursachen eine bestimmte Verzögerung, und dann laufen der Code danach. Ich habe versucht, setTimeout verwenden, aber das Problem ist, dass läuft so etwas wie diese:

console.log("1"); 
setTimeout(function(){ 
    console.log("2"); 
}, 2000); 
console.log("3"); 

Ergebnisse in es 1 gedruckt wird, dann 3 gedruckt wird, dann 2 Sekunden warten und Drucke 2 statt 1 zu tun, 2 Sekunden warten, Druck 2 Druck 3

Klarstellung: die Art, wie ich dies zu realisieren versuchen ist:

for (i=0;i<10;i++){ 
    document.getElementById("text")+="a"; 
    delay(500);  
} 

Was dieser Code sollte tun Druck einen Buchstaben zu einem Zeitpunkt, zu dem Bildschirm, mit einer halben Sekunde zwischen jedem Buchstaben drucken

Answer 1

setTimeout ist der richtige Ansatz.

Sie würden wollen,

console.log("1"); 
setTimeout(function(){ 
    console.log("2"); 
    console.log("3"); 
}, 2000); 

die "1", warten 2s wird sich einzuloggen, dann "2" log und "3" in dieser Reihenfolge.

Der Grund, warum Ihr Beispiel nicht funktioniert, ist, weil setTimeout asynchron ist. Das bedeutet, dass die an setTimeout übergebene Funktion für 2s ab dem Zeitpunkt geplant ist, an dem setTimeout aufgerufen wird, aber das Programm wird weiterhin alle folgenden Zeilen ausführen. Alles, was Sie bis nach der Verzögerung warten möchten, sollte im Block innerhalb setTimeout sein.

Wenn Sie nach Ihrer Verzögerung weitere Verzögerungen wünschen, können Sie innerhalb der Callback-Funktion setTimeout aufrufen.

Zum Beispiel:

console.log("1"); 
setTimeout(function(){ 
    console.log("2"); 
    setTimeout(function() { 
     console.log("3"); 
    }, 1000); 
}, 2000); 

Welche wird log "1", 2s warten, log "2", 1s warten, dann log "3".

-

Schleife mit Verzögerung:

while() { console.log ("1"); (2000); console.log ("2"); Konsole.log ("3"); }

wird

var loop = function() { 
    console.log("1"); 
    setTimeout(function() { 
    console.log("2"); 
    console.log("3"); 
    if (<condition>) { 
     loop(); 
    } 
    }); 
}; 

Beachten Sie, dass für eine große Anzahl von Iterationen Verfügung Stapel nicht überschreiten. In diesem Fall kann man bis zu einem gewissen Abhilfe greifen wie setTimeout(loop, 0);

Answer 2

Sie etwas ähnliches mit Rückrufe erreichen können:

function execute_after_delay(cb, msg, delay){ 
    setTimeout(function(){ 
     console.log("2"); 
     cb(msg); 
    }, delay); 
} 
console.log("1"); 
execute_after_delay(console.log, 3, 2000);