In zepto, the $. Fn object has a ready function with setTimeout(fn,0);

$.fn = {
    ready: function(callback){
      // dont use "interactive"On IE <= 10 (it can fired premature) // // document.readyState: returns when the document document is loading"loading". Returns when the document has finished rendering but is loading the embedded resource"interactive"And raises the DOMContentLoaded event. Returns when the document has finished loading"complete"And raises the Load event. / / the document. The documentElement. DoScroll, IE has a characteristic of the methoddoScroll can check whether the DOM is loaded. This method reports an error when the page has not finished loading untildoWhen Scroll stops reporting an error, DOM loading is completeif (document.readyState === "complete"|| (document.readyState ! = ="loading" && !document.documentElement.doScroll))
        setTimeout(function(){callback($)}, 0else{// Listen for the removal event var handler =function() {
          document.removeEventListener("DOMContentLoaded", handler, false)
          window.removeEventListener("load", handler, false)
          callback($)
        }
        document.addEventListener("DOMContentLoaded", handler, false)
        window.addEventListener("load", handler, false)}returnthis; }},Copy the code

function f(b) {
    var a = 12;
    return a + b + 35;
}
function g(x) {
    var m = 4;
    return f(m * x);
}
g(21);Copy the code

When g is called, the first Heap stack frame is created, containing g’s parameters and local variables. When G calls f, a second stack frame is created and placed on top of the first, containing f’s arguments and local variables. When f returns, the topmost stack frame goes off the stack (the remaining stack frames for g function calls). When g returns, the stack is empty. Here’s another example:

function test() {
    setTimeout(function() {
        alert(1)
    },1000);
    alert(2);
}
test(a);Copy the code

If alert(1) is not setTimeout, then alert(1) is next, followed by alert(2). But now with setTimeout, alert(1) is added to a new stack to wait for 1s, so the actual result is alert(2), then alert(1).

Task queue (message queue) :

• There are two types of functions: synchronous and asynchronous.

Synchronous function: A function is synchronous if the caller gets the expected result (that is, gets the expected return value or sees the expected effect) when function A returns.

Example:

console.log('Hi,'); When the function returns, you see what you expect: a string printed on the consoleCopy the code

Asynchronous function: if the caller does not get the expected result when function A returns, but needs to get it in the future by some means, then the function is asynchronous. Example:

setTimeout(fn, 1000); //setTimeout is the originating function of an asynchronous procedure, and fn is the callback function.Copy the code

var button = document.getElement('#btn');
button.addEventListener('click'.function(e) { console.log(1); });Copy the code

From the point of view of asynchronous process, addEventListener function is the initiating function of asynchronous process, and event listener function is the callback function of asynchronous process. When the event is triggered, it indicates that the asynchronous task is complete. The event listener function is encapsulated into a message and placed in a message queue, waiting for the main thread to execute.

So what exactly is the task (message)? A task (message) is a callback function added when registering an asynchronous task. If an asynchronous function has no callback, it will not be placed in the task (message) queue.

To summarize the process: After executing all of the code in the current loop, the main thread takes a message from the task (message) queue and executes it. At this point, the worker thread notifies the main thread, and the callback is executed. If the main thread does not provide a callback function in the first place, there is no need for the worker thread to notify the main thread and thus place messages on the message queue.

Example: The worker thread is an asynchronous HTTP request thread, or Ajax thread

Finally, note that the callback function for the asynchronous procedure must not be executed in the current event loop. Instead, it is fetched from the task (message) queue when the main thread is empty.

Look at this picture again

When the main thread runs, the heap and stack are created, and the code in the stack calls various external apis that add various events (click, load, done) to the “task queue”. As soon as the stack completes, the main thread reads the “task queue” and executes the corresponding callback function for those events.

SetTimeout (fn, 0

Calling the setTimeout function adds a message to the queue after a time period has passed. This time period is passed in as the second argument to the function. If there are no other messages in the queue, the message is processed immediately. However, if there are other messages, the setTimeout message must wait for the other messages to finish processing. So the second parameter only represents the minimum time, not the exact time.

Zero delay does not mean that the callback will execute immediately. When setTimeout is called with zero delay, it does not execute the callback function immediately after the given interval. The wait time is based on the number of messages waiting in the queue. That is, setTimeout() simply inserts the event into the task queue and must wait until the current code (execution stack) completes before the main thread executes its specified callback function. If the current code takes a long time, it may take a long time, so there is no guarantee that the callback will be executed at setTimeout().

example

setTimeout(function() { console.log(1); }, 0); console.log(2)Copy the code

Result 2,1. Because only after the second line, the main thread is empty, the task queue will be fetched to execute the callback function.

Summary: setTimeout(fn,0) means to specify that a task should be executed at the earliest available free time on the main thread, that is, as early as possible. It adds an event to the end of the “task queue”, so it does not execute until the main thread has processed both the synchronized task and the existing events in the “task queue”. To some extent, we can use the setTimeout(fn,0) feature to correct the order of tasks in the browser.