settimeout - How does JavaScript call web APIs?

Question

As far as I know, JavaScript's normal behavior when I call a web API just like the setTimeout 4 times:

it should call the first one then add it to a queue waiting for the call stack to be empty .. repeatedly it will do the same for all other apis .. so the second function should wait till the first executes then start to be called .. which means that it should take the second function 2 seconds or more, then it should take the third function three seconds or more ... and so on ...

---

what am I missing !?

Answer 1

Note: since I can't add comment, I posted this answer.

const sleep = (timeout) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // perform some task here
            resolve(true);
        }, timeout);
    });
};

async () => {
    // in asynchronous function
    await sleep(1000);
    // do something after code returns
};
// in global scope or synchronous
sleep(1000).then(() => {
    // callback
});