Javascript wait for condition to be true using promises

Question

I am struggling to make a simple waiting function in my program. I want to use promises and async await if possible. What I have so far:

 function waitForCondition(conditionObj) {
   var start_time = new Date().getTime()

   function checkFlag() {
     if (conditionObj.arg == conditionObj.test) {
       console.log('met');
       return new Promise(resolve => setTimeout(resolve, 1));
     } else if (new Date() > start_time + 3000) {
       console.log('not met, time out');
       return new Promise(resolve => setTimeout(resolve, 1));
     } else {
       window.setTimeout(checkFlag, 1000); 
     }
   }
   checkFlag();
 }

  async function run() {
    console.log('before');
    await waitForCondition({arg: '1', test: '1'})
    console.log('after');
  }
  run();

It should check every 1 second for a maximum time of 3 seconds. The console should look like this:

'before'
'met'
'after'

score 13 · Accepted Answer · answered Aug 03 '17 at 15:59

13

You have to return a promise:

function waitForCondition(conditionObj) {
  return new Promise(resolve => {
    var start_time = Date.now();
    function checkFlag() {
      if (conditionObj.arg == conditionObj.test) {
        console.log('met');
        resolve();
      } else if (Date.now() > start_time + 3000) {
        console.log('not met, time out');
        resolve();
      } else {
        window.setTimeout(checkFlag, 1000); 
      }
    }
    checkFlag();
  });
}

async function run() {
  console.log('before');
  await waitForCondition({arg: '1', test: '1'})
  console.log('after');
}
run();

I refactored your code a bit. To get the current time, use Date.now(). And you should be OK with calling resolve without a timeout of 1 millisecond.

answered Aug 03 '17 at 15:59

PeterMader

6,987
1
21
31

Yes, but please don't write the promise logic like that. You should promisify `setTimeout` and nothing else. – Bergi Aug 03 '17 at 16:10
@petermader thank you for the amazing answer this is exactly what I was trying to do. – T Mack Aug 03 '17 at 19:54
@Bergi, I'm new to this. It would be helpful if you could explain why? – Hans Bouwmeester May 28 '19 at 02:37
1

@HansBouwmeester Basically because you are loosing all the benefits of promises with that, like chainability and implicit error handling. Apart from not catching exceptions, the non-promise code becomes harder to modify when you want to add another asynchronous (promise) call, you are more likely to fall for the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it). – Bergi May 28 '19 at 08:25

score 2 · Answer 2 · answered Aug 03 '17 at 16:08

I believe what you are really looking for is

function waitForCondition(conditionObj) {
  var start_time = new Date().getTime()

  async function checkFlag() {
    if (conditionObj.arg == conditionObj.test) {
      console.log('met');
       // return something?
    } else if (new Date() > start_time + 3000) {
      console.log('not met, time out');
      // throw some error?
    } else {
      await new Promise(resolve => setTimeout(resolve, 1000));
      return checkFlag();
    }
  }
  return checkFlag();
}

or with a loop instead of the recursion

async function waitForCondition(conditionObj) {
  var start_time = new Date().getTime()

  while (true) {
    if (conditionObj.arg == conditionObj.test) {
      console.log('met');
      break; // or return
    }
    if (new Date() > start_time + 3000) {
      console.log('not met, time out');
      break; // or throw
    }
    await new Promise(resolve => setTimeout(resolve, 1000));
  }
}

+1, though in my opinion it's not a good idea to use recursion here (as there's no need to place anything on the stack). I think the 2nd example is the way to go. — Hans Bouwmeester, May 28 '19 at 03:53
@HansBouwmeester I posted the recursive implementation mostly because the OP had started with a recursive idea. — Bergi, May 28 '19 at 08:16

Ulysse BN · Answer 3 · 2017-08-03T16:06:12.333

0

Your function waitForCondition implicitely returns undefined. try to add a return statment at the end of it:

return checkFlag();

And as mentionned in comment, there one condition where checkFlag() returns undefined that you might want to handle by returning a Promise.

edited Aug 03 '17 at 16:06

answered Aug 03 '17 at 15:58

Ulysse BN

10,116
7
54
82

3

But just adding a `return` isn't enough. `checkFlag()` will return undefined if the condition isn't met yet. – PeterMader Aug 03 '17 at 16:02

Javascript wait for condition to be true using promises

3 Answers3

Linked