synchronous, asynchronous, and callback functions in JavaScript

 for (var i = 0; i < 5; i++) {    setTimeout(function() {        console.log (' I: ', I );     );} Console.log (i);

Output Result:

// output 5I:  5I:  5I:  5I:  5I:  5

Remember our formula, sync = = Async = Callback

1, the For loop and the console outside the loop body are synchronous, so the for loop is executed before the external console.log is executed. (Sync first) 2, for loop inside there is a settimeout callback, he is the bottom of the existence, can only be executed last. (callback bottom) So why did we first output 5?very well understood, the For loop executes first, but does not give the settimeout a parameter (callback bottom),When the For loop is finished, the settimeout is passed, and the external console prints 5 because the For loop execution is complete. Here is the concept of JavaScript stacks and Message Queuing, the concept of a detailed explanation can see Mr. Ruan's JavaScript running mechanism in detail: again on the event loop– Nanyi blog, or see Concurrency model and event Loop.

How does a JavaScript single thread handle callbacks? The code for JavaScript synchronization is executed sequentially in the stack. The settimeout callback is placed in the message queue first, the For loop executes once, puts a settimeout into the message queue, queues up, and then calls the callback method in the message queue when the synchronization code is done. In this classic example, that is, to execute a for loop, in order to put 5 settimeout callback to the message queue, and then the For loop end, there is a synchronous console, after the completion of the console, the stack has no synchronized code, go to the message queue to find, Found 5 settimeout, note that settimeout is in order. So, since SetTimeout was executed at the end, what was the output of I? The answer is 5. Does anyone say it's nonsense? Now tell everyone why SetTimeout is all 5,javascript in the process of putting settimeout in the message queue, the loop i is not saved in time, equivalent to writing an asynchronous method, but the result of Ajax has not returned, You can only wait for the return to be passed in to the async function. This is also the case here, since the For loop ends, because I is defined with Var, so Var is a global variable (there is no function, if there is a variable inside the function), this time I is 5, from the external console output results can be known. So when the settimeout is executed, because the global variable i is already 5, each parameter in the incoming settimeout is 5.

synchronous, asynchronous, and callback functions in JavaScript