$.fn = {
    ready: function(callback){
      // dont use "interactive" on IE <= 10 (it can fired premature)
      //
      // document.readyState：当document文档正在加载时,返回"loading"。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件。
      // document.documentElement.doScroll：IE有个特有的方法doScroll可以检测DOM是否加载完成。 当页面未加载完成时，该方法会报错，直到doScroll不再报错时，就代表DOM加载完成了
      if (document.readyState === "complete" ||
          (document.readyState !== "loading" && !document.documentElement.doScroll))
        setTimeout(function(){ callback($) }, 0)   //  重点
      else {
        // 监听移除事件
        var handler = function() {
          document.removeEventListener("DOMContentLoaded", handler, false)
          window.removeEventListener("load", handler, false)
          callback($)
        }
        document.addEventListener("DOMContentLoaded", handler, false)
        window.addEventListener("load", handler, false)
      }
      return this;
    },
}复制代码

function f(b) {
    var a = 12;
    return a + b + 35;
}
function g(x) {
    var m = 4;
    return f(m * x);
}
g(21);复制代码

调用 g 函数 的时候，创建了第一个 堆( Heap ) 栈(stack) 帧 ，包含了 g 的参数和局部变量。当 g 调用 f 的时候，第二个 堆栈帧 就被创建、并置于第一个 堆栈帧 之上，包含了 f 的参数和局部变量。当 f 返回时，最上层的 堆栈帧 就出栈了（剩下 g 函数调用的 堆栈帧 ）。当 g 返回的时候，栈就空了。

再举个例子:

function test() {
    setTimeout(function() {
        alert(1)
    },1000);
    alert(2);
}
test();复制代码

在执行函数 test 的时候，test 先入栈，如果不给 alert(1)加 setTimeout，那么 alert(1)第 2 个入栈，最后是 alert(2)。但现在给 alert(1)加上 setTimeout 后，alert(1)就被加入到了一个新的堆栈中等待，并1s后执行，因此实际的执行结果就是先 alert(2)，再 alert(1)。

3、任务队列（消息队列）：

• 函数分为两种：同步和异步。

　　　　同步函数：如果在函数A返回的时候，调用者就能够得到预期结果(即拿到了预期的返回值或者看到了预期的效果)，那么这个函数就是同步的。

console.log('Hi’);   //函数返回时，就看到了预期的效果：在控制台打印了一个字符串复制代码

          异步函数：即如果在函数A返回的时候，调用者还不能够得到预期结果，而是需要在将来通过一定的手段得到，那么这个函数就是异步的。
　　　 例子：

setTimeout(fn, 1000);//setTimeout是异步过程的发起函数，fn是回调函数。
复制代码

var button = document.getElement('#btn');
button.addEventListener('click',function(e) {
      console.log(1);
})；复制代码

从异步过程的角度看，addEventListener 函数就是异步过程的发起函数，事件监听器函数就是异步过程的回调函数。事件触发时，表示异步任务完成，会将事件监听器函数封装成一条消息放到消息队列中，等待主线程执行。

那么 任务（消息）到底是什么呢？ 任务（消息）就是注册异步任务时添加的回调函数。如果 一个异步函数没有回调，那么他就不会放到任务（消息）队列里。

总结一下过程：主线程在执行完当前循环中的所有代码后，就会到任务（消息）队列取出一条消息，并执行它。到此为止，就完成了工作线程对主线程的通知，回调函数也就得到了执行。如果一开始主线程就没有提供回调函数，工作线程就没必要通知主线程，从而也没必要往消息队列放消息。

例子: 工作线程为异步 http 请求线程即 Ajax 线程

最后注意异步过程的回调函数，一定不在当前这一轮事件循环中执行。而是当 这一轮执行完了，主线程空了，再从任务（消息）队列中取。

再来看一下这张图

主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。

三、setTimeout(fn, 0) 的作用

调用 setTimeout 函数会在一个时间段过去后在队列中添加一个消息。这个时间段作为函数的第二个参数被传入。如果队列中没有其它消息，消息会被马上处理。但是，如果有其它消息，setTimeout 消息必须等待其它消息处理完。因此第二个参数仅仅表示最少的时间，而非确切的时间。

零延迟 (Zero delay) 并不是意味着回调会立即执行。在零延迟调用 setTimeout 时，其并不是过了给定的时间间隔后就马上执行回调函数。其等待的时间基于队列里正在等待的消息数量。也就是说，setTimeout()只是将事件插入了任务队列，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证回调函数一定会在setTimeout()指定的时间执行。

setTimeout(function() {
     console.log(1);
 },0);
 console.log(2)复制代码

执行结果2，1。因为只有在执行完第二行以后，主线程空了，才会去任务队列中取任务执行回调函数。

总结：setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到主线程把同步任务和"任务队列"现有的事件都处理完，才会得到执行。
在某种程度上，我们可以利用setTimeout(fn,0)的特性，修正浏览器的任务顺序。

catch me:

知乎：李佳怡

知乎专栏：李佳怡的纸糊