Wie kann man warten, bis eine Prädikatbedingung in JavaScript wahr wird?

Ich habe eine Javascript-Funktion wie folgt:

function myFunction(number) {

    var x=number;
    ...
    ... more initializations
    //here need to wait until flag==true
    while(flag==false)
    {}

    ...
    ... do something

}

Das Problem ist, dass das Javascript in der Zwischenzeit hängen bleibt und mein Programm hängen bleibt. Meine Frage ist also, wie ich mitten in der Funktion warten kann, bis das Flag ohne “busy-wait” wahr ist.

Javascript ist Single-Threaded, daher das Seitenblockierungsverhalten. Sie können den von anderen vorgeschlagenen aufgeschobenen/versprochenen Ansatz verwenden. Der einfachste Weg wäre die Verwendung window.setTimeout. Z.B

function checkFlag() {
    if(flag === false) {
       window.setTimeout(checkFlag, 100); /* this checks the flag every 100 milliseconds*/
    } else {
      /* do something*/
    }
}
checkFlag();

Hier ist ein gutes Tutorial mit weiteren Erklärungen: Lernprogramm

BEARBEITEN

Wie andere bereits betonten, wäre es am besten, Ihren Code so umzustrukturieren, dass er Rückrufe verwendet. Diese Antwort sollte Ihnen jedoch eine Vorstellung davon geben, wie Sie ein asynchrones Verhalten “simulieren” können window.setTimeout.

Da Javascript in einem Browser Single-Threaded ist (mit Ausnahme von Webworkern, die hier nicht beteiligt sind) und ein Thread der Javascript-Ausführung vollständig ausgeführt wird, bevor ein anderer ausgeführt werden kann, lautet Ihre Aussage:

while(flag==false) {}

einfach für immer ausgeführt wird (oder bis sich der Browser über eine nicht reagierende Javascript-Schleife beschwert), scheint die Seite hängen zu bleiben und kein anderes Javascript wird jemals die Chance bekommen, ausgeführt zu werden, daher kann der Wert des Flags niemals geändert werden.

Für eine etwas mehr Erklärung, Javascript ist eine ereignisgesteuerte Sprache. Das bedeutet, dass es ein Stück Javascript ausführt, bis es die Kontrolle wieder an den Interpreter zurückgibt. Erst wenn es zum Interpreter zurückkehrt, holt Javascript das nächste Ereignis aus der Ereigniswarteschlange und führt es aus.

Alle Dinge wie Timer und Netzwerkereignisse laufen durch die Ereigniswarteschlange. Wenn also ein Timer ausgelöst wird oder eine Netzwerkanfrage eintrifft, wird das derzeit ausgeführte Javascript niemals “unterbrochen”. Stattdessen wird ein Ereignis in die Javascript-Ereigniswarteschlange gestellt und dann, wenn das aktuell ausgeführte Javascript beendet ist, wird das nächste Ereignis aus der Ereigniswarteschlange gezogen und es ist an der Reihe, es auszuführen.

Wenn Sie also eine Endlosschleife ausführen, z while(flag==false) {}wird das aktuell laufende Javascript niemals beendet und somit wird das nächste Ereignis niemals aus der Ereigniswarteschlange und damit dem Wert von gezogen flag wird nie gewechselt. Der Schlüssel hier ist das Javascript ist nicht interruptgesteuert. Wenn ein Timer ausgelöst wird, unterbricht er nicht das gerade laufende Javascript, führt ein anderes Javascript aus und lässt dann das gerade laufende Javascript weiterlaufen. Es wird einfach in die Ereigniswarteschlange gestellt und wartet, bis das derzeit ausgeführte Javascript fertig ist, um ausgeführt zu werden.

Was Sie tun müssen, ist zu überdenken, wie Ihr Code funktioniert, und einen anderen Weg zu finden, um den Code auszulösen, den Sie ausführen möchten, wenn der flag Wert ändert. Javascript ist als ereignisgesteuerte Sprache konzipiert. Was Sie also tun müssen, ist herauszufinden, an welchen Ereignissen Sie Interesse anmelden können, damit Sie entweder auf das Ereignis lauschen können, das dazu führen könnte, dass sich das Flag ändert, und Sie können das Flag dieses Ereignisses untersuchen oder Ihr eigenes Ereignis auslösen Welcher Code auch immer das Flag ändern könnte, oder Sie können eine Rückruffunktion implementieren, mit der jeder Code, der dieses Flag ändert, Ihren Rückruf aufrufen kann, wenn der Code, der für die Änderung des Flag-Werts verantwortlich ist, seinen Wert ändern würde truees ruft nur die Callback-Funktion und damit Ihren Code auf, der ausgeführt werden soll, wenn das Flag auf gesetzt wird true wird zur richtigen Zeit laufen. Das ist viel, viel effizienter, als zu versuchen, eine Art Timer zu verwenden, um den Flag-Wert ständig zu überprüfen.

function codeThatMightChangeFlag(callback) {
    // do a bunch of stuff
    if (condition happens to change flag value) {
        // call the callback to notify other code
        callback();
    }
}

Lösung verwenden Versprechenasync\await und EventEmitter was es ermöglicht, ohne jegliche Schleifen sofort auf Flag-Änderungen zu reagieren

const EventEmitter = require('events');

const bus = new EventEmitter();
let lock = false;

async function lockable() {
    if (lock) await new Promise(resolve => bus.once('unlocked', resolve));
    ....
    lock = true;
    ...some logic....
    lock = false;
    bus.emit('unlocked');
}

EventEmitter ist im Knoten eingebaut. Im Browser müssen Sie es selbst einbinden, zum Beispiel mit diesem Paket: https://www.npmjs.com/package/eventemitter3

ES6 mit Async / Await ,

let meaningOfLife = false;
async function waitForMeaningOfLife(){
   while (true){
        if (meaningOfLife) { console.log(42); return };
        await null; // prevents app from hanging
   }
}
waitForMeaningOfLife();
setTimeout(()=>meaningOfLife=true,420)

Moderne Lösung mit Promise

myFunction() in der ursprünglichen Frage kann wie folgt geändert werden

async function myFunction(number) {

    var x=number;
    ...
    ... more initializations

    await until(_ => flag == true);

    ...
    ... do something

}

wo until() ist diese Nutzenfunktion

function until(conditionFunction) {

  const poll = resolve => {
    if(conditionFunction()) resolve();
    else setTimeout(_ => poll(resolve), 400);
  }

  return new Promise(poll);
}

Einige Verweise auf async/await- und Pfeilfunktionen befinden sich in einem ähnlichen Beitrag: https://stackoverflow.com/a/52652681/209794

function waitFor(condition, callback) {
    if(!condition()) {
        console.log('waiting');
        window.setTimeout(waitFor.bind(null, condition, callback), 100); /* this checks the flag every 100 milliseconds*/
    } else {
        console.log('done');
        callback();
    }
}

Verwenden:

waitFor(() => window.waitForMe, () => console.log('got you'))

Ich habe dieses Problem gelöst, indem ich die folgende Methode implementiert habe.

const waitUntil = (condition) => {
    return new Promise((resolve) => {
        let interval = setInterval(() => {
            if (!condition()) {
                return
            }

            clearInterval(interval)
            resolve()
        }, 100)
    })
}

Wenn Sie jetzt warten möchten, bis eine bestimmte Bedingung erfüllt ist, können Sie es so nennen.

await waitUntil(() => /* your condition */)