0

I'm learning about promises. I tried to use setTimeOut(function(){}, 0) to do background processing. After searching into it, I find that all this would do is break out of the synchronous flow. It would not run until other code has run.

The following post says that the setTimeOut(function, 0) function will run synchronously. However I find that is not the case if I use it inside a promise. The article writes "setTimeout(function(){...}, 0) simply queues the code to run once the current call stack is finished executing. This can be useful for some things.". However, if written inside a promise, the code will run in the background while javascript executes the rest of the code.

Is setTimeout a good solution to do async functions with javascript?

If I use some code in the functionsetTimeOut(function(){somecode..}, 0), in a promise, will it then run as a background process? I did this to test it.

If I click on the body, we check to see if testPromise has been resolved. If it has, append the msge "Msge that comes after". The msge "Msge that comes before" shows up as soon as the page loads. If I refresh the page and click on the body, very quickly, there is a delay between the click and the appearance of the msge on the page. This must be because of the for loops, they have yet to complete. When I click on the page quickly after refreshing that is. However, If I refresh the page and wait a while to click, the msge appears rite away. This must be because the for loops ran in the background...rite? I see no practical reason to do this, not yet. I'm just trying to get an understanding of what's going on. Thanks! Are promises used simply to better organize asynchronous functions?

let $body = $('body');
$body.prepend('<p>first</p>');

let testPromise = new Promise(function (resolve, reject) {
    setTimeout(function () {
        let testArray = [];
        let testArray2 = [];
        for (i = 0; i <= 99999999; i++) testArray.push(5);
        for (j = 0; j <= 99999999; j++) testArray2.push(5);
        resolve();
    }, 0);
});

$body.on('click', function () {
    testPromise.then(function () {
        $body.append('<p>Msge that comes After</p>');
    });
});

$body.append('<p>Msge that comes Before</p>');
Community
  • 1
  • 1
Hugo Perea
  • 465
  • 4
  • 15
  • I used the setTimeout() function, with a time delay of 0, inside a promise. I put a bunch of for loops inside the setTimeOut(). What I found is the the for loops run in the background while the rest of the stack executes. Javascript does not pause, it keep executing other code. However, If you use setTimeout outside a promise..this is not the case. The code inside that function would run only after everything else has been executed. Weird, that the function acts differently inside a promise. – Hugo Perea Apr 23 '17 at 22:05

1 Answers1

2

Your question was already answered in the post you linked:

setTimeout(function(){...}, 0) simply queues the code to run once the current call stack is finished executing. This can be useful for some things.

So yes, it's asynchronous in that it breaks the synchronous flow, but it's not actually going to execute concurrently/on a separate thread. If your goal is background processing, have a look at webworkers. There's also a way to use iframes for background processing.

TLDR: All backgrounded/concurrent code happens asynchronously, but not all asynchronous code is happening concurrently.

A promise is simply a mechanism to avoid callback hell. (see here).

Community
  • 1
  • 1
Marco
  • 7,007
  • 2
  • 19
  • 49
  • The post says it will not execute "concurrently". However, in a promise, the code seems to be doing so. – Hugo Perea Apr 23 '17 at 20:47
  • As said, a promise is simply a mechanism to deal with asynchronous functions. There is nothing special about them. What you are seem to be confused is that some asynchronous functions are executed concurrently while others are not. – Marco Apr 23 '17 at 20:50
  • The article shows that setTimeout(function, 0) will run synchronously, that is not the case in a promise. I will try to come up with a revised example showing what I mean. – Hugo Perea Apr 23 '17 at 21:03
  • In `setTimeout(func, 0)`, the `setTimeout` function is executed immediately, but *func* is only called when the event queue is processed, i.e. after the currently running code runs to completion (call stack must be emptied). In JavaScript world we then say that *func* runs *asynchronously*. But the term is a bit biased. In other contexts, *asynchronous* can also mean that the order of execution is not determined. That is not the case here: it is well defined: if you have two such calls to `setTimeout` with delay 0, their callbacks will be executed in the same order. – trincot Apr 24 '17 at 12:23