Break out of for(ever) loop by resolved Promise

Question

I hope this is a simple question but I currently can't wrap my head around.

What I want to do is break out of a while loop which contains a delay when a promise gets resolved.

In pseudocode this would look like:

while( ! promise.resolved ){
    doSomthing()
    await sleep( 5min )
}

The loop must break instantly after the promise is resolved and not wait for sleep to finish.

sleep is currently implemented trivially by setTimeout but can be implemented differently.

I would like to have some kind of spatial separation between the awaited promise and sleep to show its working more clearly*) (and because I hope for an elegant solution to learn from). So what would work but I don't like is something like:

while( true ){

    doSomething()
    try {
        await Promise.race([promise,rejectAfter(5000)])
        break
    } catch( e ){}
} 

If you must know:

doSomething is sending out status information.

promise is waiting for user interaction.

*) Part of the purpose of this code is to show/demonstrate others how things are expect to work. So I'm looking for the clearest solution on this level of implementation.

Answer 1

Minor modification of your idea to make it work better:

const sleep = ms =>
    new Promise(resolve => setTimeout(resolve, ms));

async function waitAndDo(promise) {
  let resolved = false;
  const waitFor = promise
    .then((result) => resolved = true);
    
  while(!resolved) {
    doSomething();
    await Promise.race([waitFor, sleep(5000)]);
  }
}

1. The function accepts a promise and will be working until it resolves.
2. The waitFor promise will finish after promise is fulfilled and resolved updated to true.
3. The while loop can then loop until the resolved variable is set to true. In that case, the loop will end an execution continues after it.
4. Inside the loop, Promise.race() will ensure that it will stop awaiting as soon as the promise resolves or the sleep expires. Whichever comes first.

Therefore, as soon as the promise gets resolve, the .then() handler triggers first and updates resolved. The await Promise.race(); will end the waiting after and the while loop will not execute again, since resolved is now true.

Answer 2

Seems like you would just use some sort of interval and kill it when the promise is done.

const updateMessage = (fnc, ms, runInit) => {
  if (runInit) fnc();
  const timer = window.setInterval(fnc, ms);
  return function () {
    console.log('killed');
    timer && window.clearTimeout(timer);
  }
}

const updateTime = () => {
  document.getElementById("out").textContent = Date.now();
}

const updateEnd = updateMessage(updateTime, 100, true);

new Promise((resolve) => {
  window.setTimeout(resolve, Math.floor(Math.random()*5000));
}).then(updateEnd);

<div id="out"></div>

Answer 3

As an alternative to VLAZ's very reasonable answer, you can avoid the separate boolean sentinel by having your sleep function return some kind of unique sentinel return value that indicates the the timeout. Symbol is exactly the kind of lightweight, unique object for this use case.

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

const inputPromise = new Promise(
    resolve => document.getElementById("wakeUp").addEventListener("click", resolve));

async function yourFunction() {
  const keepSleeping = Symbol("keep sleeping");
  do {
    /* loop starts here */
    console.log("Sleeping...");
    /* loop ends here */
  } while (await Promise.race([inputPromise, sleepPromise(3000, keepSleeping)]) === keepSleeping);
  console.log("Awake!");
}

yourFunction();

<button id="wakeUp">Wake up</button>