Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is using async in setTimeout valid?

I had a asynchronous function in Javascript and I added setTimeout to it. The code looks like that:

        let timer;
        clearTimeout(timer);
        timer =setTimeout(() => {
        (async() => {
            await this._doSomething();
        })();
        }, 2000);

The purpose of setTimeout is to add 2 seconds before function will be run. It is to be sure that user stopped typing.

Should I remove async/await from this function now, since setTimeout is asynchronous anyway?

like image 660
Marta Avatar asked Aug 16 '16 12:08

Marta


People also ask

Does setTimeout work asynchronous?

Working with asynchronous functionssetTimeout() is an asynchronous function, meaning that the timer function will not pause execution of other functions in the functions stack.

Why await has no effect on setTimeout?

You can't await setTimeout (meaningfully) because setTimeout does not return a Promise . async/await is syntactic sugar for working with promises. If the function doesn't return a promise then await doesn't really help. await setTimeout() has the same effect as setTimeout() .

How setTimeout works asynchronously under the hood?

every function that is asynchronous like Ajax, setTimeout, event handlers, etc.., joins the Events table and waits for the time for execution to come for example setTimeout waits 3000 ms to run or event handler waits until Click event happens and then run.


1 Answers

setTimeout adds a delay before a function call, whereas async/await is syntactic sugar ontop of promises, a way to chain code to run after a call completes, so they're different.

setTimeout has terrible error-handling characteristics, so I recommend the following in all code:

let wait = ms => new Promise(resolve => setTimeout(resolve, ms));

and then never call setTimeout directly again.

Your code now becomes:

let foo = async () => {
  await wait(2000);
  await this._doSomething();
}

except foo waits for doSomething to finish. This is usually desirable, but without context it's hard to know what you want. If you meant to run doSomething in parallel with other code, I recommend:

async () => { await Promise.all([foo(), this._otherCode()]); };

to join and capture errors in the same place.

If you truly meant to fire and forget _doSomething and not wait for it, you can lose the await, but you should try/catch errors:

async () => {
  let spinoff = async () => { try { await foo(); } catch (e) { console.log(e); } };
  spinoff(); // no await!
}

But I don't recommend that pattern, as it's subtle and can be easy to miss.

like image 135
jib Avatar answered Sep 28 '22 09:09

jib