Was ist die JavaScript-Version von sleep()?

Question

Gibt es einen besseren Weg zur Entwicklung einer sleep in JavaScript als die folgenden pausecomp Funktion ( entnommen von hier )?

function pausecomp(millis)
{
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date < millis);
}

Es handelt sich nicht um ein Duplikat von Sleep in JavaScript - Verzögerung zwischen Aktionen Ich möchte eine echter Schlaf in der Mitte einer Funktion und nicht eine Verzögerung, bevor ein Teil des Codes ausgeführt wird.

Answer 1

Auf der Serverseite können Sie mit der deasync sleep() Methode, die von Haus aus implementiert ist in C damit sie eine wirksame Umsetzung eines warten Wirkung, ohne die Ereignisschleife oder die CPU zu 100 % auszulasten.

Exemple :

#!/usr/bin/env node

// Requires `npm install --save deasync`
var sleep = require("deasync").sleep;

sleep(5000);

console.log ("Hello World!!");

Aber wenn Sie eine rein JavaScript-Funktion (z. B. um sie auf der Client-Seite eines Browsers auszuführen), muss ich leider sagen, dass ich glaube, dass Ihre pausecomp() Funktion ist der einzige Weg, sich dem Thema zu nähern, und mehr als das:

1. Dadurch wird nicht nur Ihre Funktion, sondern die gesamte Ereignisschleife unterbrochen. Es werden also keine anderen Ereignisse bedient.

2. Dadurch wird Ihre CPU zu 100 % ausgelastet.

Wenn Sie es also für ein Browserskript brauchen und diese schrecklichen Effekte nicht wollen, müssen Sie Ihre Funktion in gewisser Weise neu überdenken:

a). Sie können es abrufen (oder a do_the_rest() Funktion) bei einer Zeitüberschreitung. Der einfachere Weg, wenn Sie kein Ergebnis von Ihrer Funktion erwarten.

b). Oder, wenn Sie auf ein Ergebnis warten müssen, dann sollten Sie auf Versprechen umsteigen (oder eine Callback-Hölle, natürlich ;-)).

Kein Ergebnis erwartet Beispiel:

function myFunc() {

    console.log ("Do some things");

    setTimeout(function doTheRest(){
        console.log ("Do more things...");
    }, 5000);

    // Returns undefined.
};

myFunc();

Ein Beispiel, bei dem ein Versprechen zurückgegeben wird (beachten Sie, dass sich dadurch die Verwendung der Funktion ändert):

function myFunc(someString) {

    return new Promise(function(resolve, reject) {

        var result = [someString];
        result.push("Do some things");

        setTimeout(function(){
            result.push("Do more things...");
            resolve(result.join("\n"));
        }, 5000);
    });
};

// But notice that this approach affect to the function usage...
// (It returns a promise, not actual data):
myFunc("Hello!!").then(function(data){
    console.log(data);
}).catch(function(err){
    console.error(err);
});

Answer 2

Die kurze Antwort lautet keine und nicht in JavaScript selbst. Ihre Lösung scheint die einzige Möglichkeit zu sein, die Kontrolle nicht an die Umgebung zurückzugeben.

Dies ist notwendig, wenn die Umgebung keine Ereignisse unterstützt. Sie würden wahrscheinlich nicht die setTimeout entweder.

setTimeout ist definitiv der beste Weg, wenn Sie sich in einer ereignisgesteuerten Umgebung wie einem Browser oder Node.js .

Answer 3

2021+ Update

Wenn Sie nach einer Alternative zu suchen:

let sleep = ms => new Promise(res=>setTimeout(res,ms));

Dann verwenden Sie dies:

let sleep = async ms => void await Atomics.waitAsync(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms).value;

Beachten Sie, dass es sich zum Zeitpunkt der Veröffentlichung dieser Frage um einen Vorschlag der Stufe 3 handelt. Außerdem kann es erforderlich sein, dass Ihre Website herkunftsübergreifend isoliert wird. Um zu sehen, ob es in Ihrem Browser funktioniert, (auf Stack Overflow) versuchen Sie dies:

let sleep = async ms => void await Atomics.waitAsync(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms).value;

void async function() {
  console.log(1);
  await sleep(2000);
  console.log(2);
}()

Answer 4

In manchen Situationen ist es eine gute Alternative, ein Meldungsfenster auf der obersten Ebene anzuzeigen, um die Benutzerinteraktion zu stoppen, und es dann wieder auszublenden, wenn Sie das erwartete Ergebnis erhalten (asynchron). So kann der Browser im Hintergrund weiterarbeiten, aber der Arbeitsablauf wird angehalten, bis Sie Ihr Ergebnis zurückerhalten haben.

Answer 5

Ich habe diese Frage schon seit langem, und die Antwort, die ich brauchte, war nicht genau das, was hier gegeben wurde. Diese Wartefunktion verursacht ein synchrones Warten, das die CPU nicht belastet.

Funktion waitForIt stellt eine Ajax-Anfrage an eine beliebige Stelle und setzt das async-Flag auf false. Funktion waitF macht dasselbe mit einem Rahmen und einer Funktion waitD macht dasselbe mit einem div. Ajax braucht etwa 100 ms, frame etwa 25 und div etwa 1.

Die Wartefunktion nutzt alle diese Möglichkeiten, je nachdem, wie viel Zeit Sie ihr geben. Wenn sie nicht lange genug gewartet hat, machen Sie es noch einmal.

Ich brauche dies, wenn ich mit mehreren asynchronen Ladeelementen arbeite. Im Grunde für 'warten, bis dieses Element existiert'. Sie können damit spielen unter https://jsfiddle.net/h2vm29ue/ . Er nutzt einfach die Dinge, auf die der Browser von Natur aus wartet. Die längere Version, https://jsfiddle.net/5cov1p0z/32/ ist präziser.

 function waitForIt() {
     var start = new Date();
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {
            // Doesn't matter
         }
     };
     xhttp.open("GET", "WaitForIt", false);
     xhttp.send();
     var end = new Date();
 }
 //

 function waitF() {
     var start = new Date();
     var ifram = document.createElement('iframe');
     ifram.id = 'ifram';
     ifram.src = '';
     var div = document.createElement('div');
     div.id = 'timer';
     document.body.appendChild(div);
     document.getElementById('timer').appendChild(ifram);
     document.getElementById('timer').removeChild(ifram);
     document.body.removeChild(div);
     var end = new Date();
     return (end - start);
 }

 function waitD() {
     var start = new Date();
     var div = document.createElement('div');
     div.id = 'timer';
     document.body.appendChild(div);
     div.click();
     document.body.removeChild(div);
     var end = new Date();
     return (end - start);
 }

 function wait(time) {
     var start = new Date();
     var end = new Date();
     while ((end - start < time)) {

         if ((time - (end - start)) >= 200) {
             waitForIt();
         } else {
             if ((time - (end - start)) >= 50) {
                 waitF();
             } else {
                 waitD();
             }
         }
         end = new Date();
     }
     return (end - start);
 }