¿Cómo esperar hasta que una condición predicada se vuelva verdadera en JavaScript?

Tengo una función javascript como esta:

function myFunction(number) {

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

    ...
    ... do something

}

El problema es que el javascript se atascó en el tiempo y atascó mi programa. entonces mi pregunta es ¿cómo puedo esperar en medio de la función hasta que el indicador sea verdadero sin “esperar ocupado”?

Javascript tiene un solo subproceso, de ahí el comportamiento de bloqueo de página. Puede utilizar el enfoque diferido/promesa sugerido por otros. La forma más básica sería usar window.setTimeout. P.ej

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

Aquí hay un buen tutorial con más explicaciones: Tutorial

EDITAR

Como señalaron otros, la mejor manera sería reestructurar su código para usar devoluciones de llamada. Sin embargo, esta respuesta debería darle una idea de cómo puede ‘simular’ un comportamiento asíncrono con window.setTimeout.

Debido a que javascript en un navegador tiene un solo subproceso (excepto para los trabajadores web que no están involucrados aquí) y un subproceso de ejecución de javascript se ejecuta hasta completarse antes de que se pueda ejecutar otro, su declaración:

while(flag==false) {}

simplemente se ejecutará para siempre (o hasta que el navegador se queje de un bucle de javascript que no responde), la página parecerá estar bloqueada y ningún otro javascript tendrá la oportunidad de ejecutarse, por lo que el valor de la bandera nunca se puede cambiar.

Para un poco más de explicación, Javascript es un lenguaje dirigido por eventos. Eso significa que ejecuta una parte de Javascript hasta que devuelve el control al intérprete. Luego, solo cuando regresa al intérprete, Javascript obtiene el siguiente evento de la cola de eventos y lo ejecuta.

Todas las cosas, como temporizadores y eventos de red, se ejecutan en la cola de eventos. Entonces, cuando se dispara un temporizador o llega una solicitud de red, nunca “interrumpe” el Javascript que se está ejecutando actualmente. En cambio, un evento se coloca en la cola de eventos de Javascript y luego, cuando finaliza el Javascript que se está ejecutando actualmente, el siguiente evento se extrae de la cola de eventos y le toca ejecutarse.

Entonces, cuando haces un bucle infinito como while(flag==false) {}el Javascript que se ejecuta actualmente nunca finaliza y, por lo tanto, el siguiente evento nunca se extrae de la cola de eventos y, por lo tanto, el valor de flag nunca se cambia. La clave aquí es que Javascript no está controlado por interrupciones. Cuando se dispara un temporizador, no interrumpe el Javascript que se está ejecutando actualmente, ejecuta otro Javascript y luego deja que el Javascript que se está ejecutando actualmente continúe. Simplemente se coloca en la cola de eventos esperando hasta que el Javascript que se está ejecutando actualmente termine para obtener su turno para ejecutarse.

Lo que debe hacer es repensar cómo funciona su código y encontrar una forma diferente de activar cualquier código que desee ejecutar cuando el flag cambios de valor. Javascript está diseñado como un lenguaje basado en eventos. Entonces, lo que debe hacer es averiguar en qué eventos puede registrar un interés para que pueda escuchar el evento que podría causar que la bandera cambie y pueda examinar la bandera en ese evento o puede desencadenar su propio evento desde cualquier código podría cambiar la bandera o puede implementar una función de devolución de llamada que cualquier código que cambie esa bandera puede llamar a su devolución de llamada cada vez que la pieza de código responsable de cambiar el valor de la bandera cambiaría su valor a truesolo llama a la función de devolución de llamada y, por lo tanto, a su código que desea ejecutar cuando la bandera se establece en true llegará a funcionar en el momento adecuado. Esto es mucho, mucho más eficiente que tratar de usar algún tipo de temporizador para verificar constantemente el valor de la bandera.

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

Solución usando Promesaasíncrono\esperar y EventEmitter lo que permite reaccionar inmediatamente al cambio de bandera sin ningún tipo de bucles

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 está incorporado en el nodo. En el navegador, deberá incluirlo usted mismo, por ejemplo, utilizando este paquete: https://www.npmjs.com/package/eventemitter3

ES6 con 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)

Solución moderna usando Promise

myFunction() en la pregunta original se puede modificar de la siguiente manera

async function myFunction(number) {

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

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

    ...
    ... do something

}

dónde until() es esta función de utilidad

function until(conditionFunction) {

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

  return new Promise(poll);
}

Algunas referencias a las funciones async/await y arrow se encuentran en una publicación similar: 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();
    }
}

Usar:

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

Resolví este problema implementando el método a continuación.

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

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

Ahora, cada vez que desee esperar hasta que se cumpla una determinada condición, puede llamarlo así.

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