Callbacks will never be called before the completion of the current run of the
JavaScript
event loop.
source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises
In the Spanish version :
Callback functions will never be called before the completion of the current execution of the JavaScript event loop.
What do you mean by saying that callbacks attached to a promise will not be executed before the current execution of the event loop completes? I don't really understand that part
Let's go by steps:
Let's briefly define callback as a function that is passed as a parameter to another so that the latter calls it. I assume the OP knows the concept so we won't go into details.
Javascript concurrency model:
The first thing is to understand that you cannot stop the execution of the code once it has started, the execution will be executed until the code finishes normally or causes an error that is not caught. This can cause a browser interface to appear to stop responding to user actions, because those actions get no response, as the code associated with those actions is queued for execution, waiting its turn. In short, you could say that every execution happens inside an event loop:
If the current thread of execution terminates, the next thread in the event queue will start executing . If the queue is empty, then nothing will be executed and the system will wait for some event to add code to the queue.
Here we have to clarify that when we call
setTimeout
orsetInterval
do not add events to the queue directly, the events will be added when the time determined in the calls has elapsed.An example of code that adds events would be the function
setTimeout(callback, time)
: this function will add the function code to the event queuecallback
withintime
milliseconds.Here we see that we are queuing calls to
console.log()
, but these are not executed until the loop ends. By the time the loop endsi
it is equal to 5 and therefore it is shown5
4 times, once for each queued event .This is the behavior of promises: even though their execution can be completed immediately, the code will not be executed until the current thread terminates. In the following example we see that the promises are completed immediately, but the callback code (what we pass to it through the then method ), is added to the event queue:
Important note : When defining a promise like this, we have two callbacks: one is the function
completa
, which is executed synchronously and immediately, and the other is the one we pass tothen
, which is asynchronous (it is added to the tail of the event loop ). It is the latter that the question's documentation refers to. It looks clearer if we create promises withasync
:First of all, it is good that you read the reference to the event loop. After you have read it, I think you will understand perfectly what it means if I explain it to you with two snippets:
Traditional callbacks:
Notice how
hazAlgo
andhazAlgoMas
are executed one after the other in each iteration of the loop.Using promises:
As you can see, in this case, the event loop is organized differently, first in the queue are the calls to
hazAlgo
, no matter whathazAlgoMas
and theconsole.log
are also declared inside the loop.Then there are the calls
hazAlgoMas
one after the other and finally all the onesconsole.log
with the results. As you can see, thecallbacks
ones have not been executed as in the previous example, the loop creates different messages in the event loop with calls to the functionhazAlgo
and since it returns a promise, the onescallbacks
of each of these calls will be executed after they are executed. have processed all those previously created messages. This is what the following statement refers to:Depending on the architecture of your application this can be useful to make sure that some data has not changed because some callback has changed it without your wanting it.