javascript - $(document).ready(...) 的调用堆栈是如何组装的？

Question

<分区>

Answer 1

它们同步运行。

也就是说它们是按顺序运行的:

1. console.log("foo"); //this gets first logged
2. console.log("John Skeet"); //this gets logged after "foo"
3. console.log("bar"); //this gets logged after "John Skeet"
4. console.log("Bjarne Stroustrup"); //this gets logged after "Bjarne Stroustrup" 

因此，除非您有异步代码，否则它们会同步运行。

例如:

$(document).ready(function(){
  setTimeout(function(){
     console.log('foo');
  }, 1000);
});
$(document).ready(function(){
  setTimeout(function(){
     console.log('bar');
  }, 2000);
});

在我的代码示例中，我提供了异步代码(setTimeout 方法)，首先记录“bar”，然后记录“foo”。

因此，文档就绪处理程序与排序无关紧要，但与其同步/异步代码有关。

看看jquery的代码你可能就清楚了:

jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

因此，所有就绪的处理程序都被推送到 promise，然后调用其函数。