async await with setInterval

Question

function first(){
  console.log('first')
}
function second(){
  console.log('second')
}
let interval = async ()=>{
  await setInterval(first,2000)
  await setInterval(second,2000)
}
interval();

Imagine that I have this code above.

When I run it, first() and second() will be called at the same time; how do I call second() after first)() returns some data, for example, if first() is done, only then call second()?

Because first() in my code will be working with a big amount of data and if this 2 functions will be calling at the same time, it will be hard for the server.

How do I call second() each time when first() will return some data?

Answer 1

As mentioned above setInterval does not play well with promises if you do not stop it. In case you clear the interval you can use it like:

async function waitUntil(condition) {
  return await new Promise(resolve => {
    const interval = setInterval(() => {
      if (condition) {
        resolve('foo');
        clearInterval(interval);
      };
    }, 1000);
  });
}

Later you can use it like

const bar = waitUntil(someConditionHere)

Answer 2

You have a few problems:

1. Promises may only ever resolve once, setInterval() is meant to call the callback multiple times, Promises do not support this case well.
2. Neither setInterval(), nor the more appropriate setTimeout() return Promises, therefore, awaiting on them is pointless in this context.

You're looking for a function that returns a Promise which resolves after some times (using setTimeout(), probably, not setInterval()).

Luckily, creating such a function is rather trivial:

async function delay(ms) {
  // return await for better async stack trace support in case of errors.
  return await new Promise(resolve => setTimeout(resolve, ms));
}

With this new delay function, you can implement your desired flow:

function first(){
  console.log('first')
}
function second(){
  console.log('second')
}
let run = async ()=>{
  await delay(2000);
  first();
  await delay(2000)
  second();
}
run();

Answer 3

setInterval doesn't play well with promises because it triggers a callback multiple times, while promise resolves once.

It seems that it's setTimeout that fits the case. It should be promisified in order to be used with async..await:

async () => {
  await new Promise(resolve => setTimeout(() => resolve(first()), 2000));
  await new Promise(resolve => setTimeout(() => resolve(second()), 2000));
}

Answer 4

await expression causes async to pause until a Promise is settled

so you can directly get the promise's result without await

for me, I want to initiate Http request every 1s

let intervalid 
async function testFunction() {
    intervalid = setInterval(() => {
        // I use axios like: axios.get('/user?ID=12345').then
        new Promise(function(resolve, reject){
            resolve('something')
        }).then(res => {
            if (condition) {
               // do something 
            } else {
               clearInterval(intervalid)
            }    
        })  
    }, 1000)  
}
// you can use this function like
testFunction()
// or stop the setInterval in any place by 
clearInterval(intervalid)

Answer 5

You could use an IFFE. This way you could escape the issue of myInterval not accepting Promise as a return type.

There are cases where you need setInterval, because you want to call some function unknown amount of times with some interval in between. When I faced this problem this turned out to be the most straight-forward solution for me. I hope it help someone :)

For me the use case was that I wanted to send logs to CloudWatch but try not to face the Throttle exception for sending more than 5 logs per second. So I needed to keep my logs and send them as a batch in an interval of 1 second. The solution I'm posting here is what I ended up using.

  async function myAsyncFunc(): Promise<string> {
    return new Promise<string>((resolve) => {
      resolve("hello world");
    });
  }

  function myInterval(): void {
    setInterval(() => {
      void (async () => {
        await myAsyncFunc();
      })();
    }, 5_000);
  }

  // then call like so
  myInterval();

Answer 6

In my case, I needed to iterate through a list of images, pausing in between each, and then a longer pause at the end before re-looping through. I accomplished this by combining several techniques from above, calling my function recursively and awaiting a timeout. If at any point another trigger changes my animationPaused:boolean, my recursive function will exit.

    const loopThroughImages = async() => {
      for (let i=0; i<numberOfImages; i++){
        if (animationPaused) {
          return;
        }
        this.updateImage(i);
        await timeout(700);
      }
      await timeout(1000);
      loopThroughImages();
    }

    loopThroughImages();