Warten Sie, bis flag = true ist

Ich habe 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 Zeit steckt und mein Programm steckt. Meine Frage ist also, wie ich in der Mitte der Funktion warten kann, bis das Flag wahr ist, ohne "beschäftigt zu warten".

Da Javascript in einem Browser ein einzelner Thread 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) {}

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

Für ein wenig mehr Erklärung ist Javascript eine ereignisgesteuerte Sprache . Das bedeutet, dass ein Teil von Javascript ausgeführt wird, bis die Kontrolle an den Interpreter zurückgegeben wird. Erst wenn es zum Interpreter zurückkehrt, ruft Javascript das nächste Ereignis aus der Ereigniswarteschlange ab und führt es aus.

Alle Dinge wie Timer und Netzwerkereignisse werden in der Ereigniswarteschlange ausgeführt. Wenn also ein Timer ausgelöst wird oder eine Netzwerkanforderung eintrifft, "unterbricht" er niemals das aktuell ausgeführte Javascript. Stattdessen wird ein Ereignis in die Javascript-Ereigniswarteschlange gestellt. Wenn das aktuell ausgeführte Javascript beendet ist, wird das nächste Ereignis aus der Ereigniswarteschlange gezogen und kann ausgeführt werden.

Wenn Sie also eine Endlosschleife wie z. B. while(flag==false) {}ausführen, wird das aktuell ausgeführte Javascript nie beendet, und daher wird das nächste Ereignis nie aus der Ereigniswarteschlange gezogen, und daher wird der Wert von flagnie geändert. Der Schlüssel hier ist, dass Javascript nicht Interrupt-gesteuert ist . Wenn ein Timer ausgelöst wird, wird das aktuell ausgeführte Javascript nicht unterbrochen, es wird kein anderes Javascript ausgeführt und das aktuell ausgeführte Javascript wird fortgesetzt. Es wird nur in die Ereigniswarteschlange gestellt und wartet, bis das aktuell ausgeführte Javascript fertig ist, damit es an die Reihe kommt.

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 Codeflag Wert ändert. Javascript ist als ereignisgesteuerte Sprache konzipiert. Sie müssen also herausfinden, an welchen Ereignissen Sie ein Interesse anmelden können, damit Sie entweder auf das Ereignis warten können, durch das sich das Flag möglicherweise ändert, und das Flag für dieses Ereignis untersuchen oder Ihr eigenes Ereignis auslösen können Unabhängig davon, welcher Code das Flag ändert oder Sie eine Rückruffunktion implementieren können, kann jeder Code, der dieses Flag ändert, Ihren Rückruf aufrufen, wenn der Code, der für die Änderung des Flag-Werts verantwortlich ist, seinen Wert in ändert. Er trueruft lediglich die Rückruffunktion und damit Ihren Code auf das will laufen, wenn das Flag gesetzt wirdtruewird zur richtigen Zeit laufen. Dies ist viel, viel effizienter als der Versuch, den Flag-Wert ständig mit einem Timer 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();
    }
}

Javascript ist Single-Threaded, daher das Seitenblockierungsverhalten. Sie können den von anderen vorgeschlagenen Ansatz des verzögerten Versprechens verwenden, aber der grundlegendste 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: Tutorial

BEARBEITEN

Wie andere betonten, besteht der beste Weg darin, Ihren Code neu zu strukturieren, um Rückrufe zu verwenden. Diese Antwort sollte Ihnen jedoch eine Vorstellung davon geben, wie Sie ein asynchrones Verhalten mit "simulieren" können window.setTimeout.

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

Lösung mit Promise , async \ await und EventEmitter, die es ermöglicht, sofort auf Flaggenwechsel ohne Schleifen 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');
}

EventEmitterist im Knoten eingebaut. Im Browser müssen Sie es selbst einbinden, beispielsweise 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)

Mit Ecma Script 2017 können Sie async-await und while zusammen verwenden, um dies zu tun. Und während das Programm nicht abstürzt oder sperrt, ist selbst eine Variable niemals wahr

//First define some delay function which is called from async function
function __delay__(timer) {
    return new Promise(resolve => {
        timer = timer || 2000;
        setTimeout(function () {
            resolve();
        }, timer);
    });
};

//Then Declare Some Variable Global or In Scope
//Depends on you
var flag = false;

//And define what ever you want with async fuction
async function some() {
    while (!flag)
        await __delay__(1000);

    //...code here because when Variable = true this function will
};

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 Dienstprogrammfunktion?

function until(conditionFunction) {

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

  return new Promise(poll);
}

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

Zum Durchlaufen von ($ .each) Objekten und Ausführen einer länger laufenden Operation (die verschachtelte Ajax-Synchronisierungsaufrufe enthält) für jedes Objekt:

Ich habe zuerst einen Brauch festgelegt done=false Eigenschaft für jede festgelegt.

Stellen Sie dann in einer rekursiven Funktion jede ein done=trueund verwenden Sie sie weiter setTimeout. (Diese Operation soll alle anderen Benutzeroberflächen stoppen, einen Fortschrittsbalken anzeigen und alle anderen Verwendungszwecke blockieren, damit ich mir die Synchronisierungsaufrufe verziehen kann.)

function start()
{
    GlobalProducts = getproductsfromsomewhere();
    $.each(GlobalProducts, function(index, product) {
         product["done"] = false;
    });

    DoProducts();
}
function DoProducts()
{
    var doneProducts = Enumerable.From(GlobalProducts).Where("$.done == true").ToArray(); //linqjs

    //update progress bar here

    var nextProduct = Enumerable.From(GlobalProducts).Where("$.done == false").First();

        if (nextProduct) {
            nextProduct.done = true;
            Me.UploadProduct(nextProduct.id); //does the long-running work

            setTimeout(Me.UpdateProducts, 500)
        }
}

Ähnlich wie bei Lightbeards Antwort verwende ich den folgenden Ansatz

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

async function until(fn) {
    while (!fn()) {
        await sleep(0)
    }
}

async function myFunction(number) {
    let x = number
    ...
    ... more initialization

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

    ...
    ... do something
}

Ich habe versucht, den @ Kiran-Ansatz wie folgt zu verwenden:

checkFlag: function() {
  var currentObject = this; 
  if(flag == false) {
      setTimeout(currentObject.checkFlag, 100); 
   } else {
     /* do something*/
   }
}

(Framework, das ich benutze, zwingt mich, Funktionen auf diese Weise zu definieren). Aber ohne Erfolg, denn wenn die Ausführung zum zweiten Mal in die checkFlag-Funktion kommt, thisist dies nicht mein Objekt Window. Also habe ich mit dem Code unten fertig

checkFlag: function() {
    var worker = setInterval (function(){
         if(flag == true){             
             /* do something*/
              clearInterval (worker);
         } 
    },100);
 }

Verwenden von nicht blockierendem Javascript mit der EventTarget-API

In meinem Beispiel muss ich auf einen Rückruf warten, bevor ich ihn verwenden kann. Ich habe keine Ahnung, wann dieser Rückruf eingestellt ist. Es kann vor oder nach der Ausführung sein. Und ich muss es möglicherweise mehrmals aufrufen (alles asynchron)

// bus to pass event
const bus = new EventTarget();

// it's magic
const waitForCallback = new Promise((resolve, reject) => {
    bus.addEventListener("initialized", (event) => {
        resolve(event.detail);
    });
});



// LET'S TEST IT !


// launch before callback has been set
waitForCallback.then((callback) => {
    console.log(callback("world"));
});


// async init
setTimeout(() => {
    const callback = (param) => { return `hello ${param.toString()}`; }
    bus.dispatchEvent(new CustomEvent("initialized", {detail: callback}));
}, 500);


// launch after callback has been set
setTimeout(() => {
    waitForCallback.then((callback) => {
        console.log(callback("my little pony"));
    });
}, 1000);

Es gibt ein Knotenpaket, das delaysehr einfach zu bedienen ist

const delay = require('delay');

(async () => {
    bar();

    await delay(100);

    // Executed 100 milliseconds later
    baz();
})();

Ich habe hier einen Ansatz in Anlehnung an die Callback-Lösungen gewählt, aber versucht, ihn etwas allgemeiner zu gestalten. Die Idee ist, dass Sie Funktionen hinzufügen, die Sie ausführen müssen, nachdem sich etwas in einer Warteschlange geändert hat. Wenn das passiert, durchlaufen Sie die Warteschlange, rufen die Funktionen auf und leeren die Warteschlange.

Funktion zur Warteschlange hinzufügen:

let _queue = [];

const _addToQueue = (funcToQ) => {
    _queue.push(funcToQ);
}

Führen Sie die Warteschlange aus und leeren Sie sie:

const _runQueue = () => {
    if (!_queue || !_queue.length) {
        return;
    }

    _queue.forEach(queuedFunc => {
        queuedFunc();
    });

    _queue = [];
}

Und wenn Sie _addToQueue aufrufen, möchten Sie den Rückruf umbrechen:

_addToQueue(() => methodYouWantToCallLater(<pass any args here like you normally would>));

Wenn Sie die Bedingung erfüllt haben, rufen Sie an _runQueue()

Dies war nützlich für mich, da ich mehrere Dinge hatte, die unter denselben Bedingungen warten mussten. Und es entkoppelt die Erkennung der Bedingung von allem, was ausgeführt werden muss, wenn diese Bedingung getroffen wird.

In meinem Beispiel protokolliere ich jede Sekunde einen neuen Zählerwert:

var promises_arr = [];
var new_cntr_val = 0;

// fill array with promises
for (let seconds = 1; seconds < 10; seconds++) {
    new_cntr_val = new_cntr_val + 5;    // count to 50
    promises_arr.push(new Promise(function (resolve, reject) {
        // create two timeouts: one to work and one to resolve the promise
        setTimeout(function(cntr) {
            console.log(cntr);
        }, seconds * 1000, new_cntr_val);    // feed setTimeout the counter parameter
        setTimeout(resolve, seconds * 1000);
    }));
}

// wait for promises to finish
Promise.all(promises_arr).then(function (values) {
    console.log("all promises have returned");
});

Wenn Sie Folgendes verwenden dürfen: In async/awaitIhrem Code können Sie Folgendes ausprobieren:

const waitFor = async (condFunc: () => boolean) => {
  return new Promise((resolve) => {
    if (condFunc()) {
      resolve();
    }
    else {
      setTimeout(async () => {
        await waitFor(condFunc);
        resolve();
      }, 100);
    }
  });
};

const myFunc = async () => {
  await waitFor(() => (window as any).goahead === true);
  console.log('hello world');
};

myFunc();

Demo hier: https://stackblitz.com/edit/typescript-bgtnhj?file=index.ts

Kopieren / Einfügen auf der Konsole : goahead = true.