Question

当我在大型网站上工作并且包含一堆外来JS文件并尝试调试内容时，我总是对此感到困惑。

如果我有

<script type="text/javascript">
     $(document).ready(function(){
          console.log("foo");
     });
     $(document).ready(function(){
          console.log("bar");
     });
</script>

然后在console.log("bar")之后立即触发保证console.log("foo") ???如果我有

，它是一样的吗？

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script>

其中script1.js由

组成

     $(document).ready(function(){
          console.log("foo");
     });

和script2.js由

组成

     $(document).ready(function(){
          console.log("foo");
     });

当我将window.onload和document.onload添加到混音中时会发生什么，例如

<script type="text/javascript">
     $(document).ready(function(){
          console.log("foo");
     });
     window.onload = function() { console.log("John Skeet"); };
     $(document).ready(function(){
          console.log("bar");
     });
     window.onload = function() { console.log("Bjarne Stroustrup"); };
</script>

···

有人可以在这里解释，或者引导我阅读解释的文档，这些规则是关于这些“在其他所有事情之后”的功能是如何堆叠的吗？

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;
};

因此，所有准备好的处理程序都会被推送到promises然后调用它的函数。

Answer 2

有几件事：

<script type="text/javascript" src="script1.js"></script> 
<script type="text/javascript" src="script2.js"></script>

表示脚本包含在该顺序中（并且顺序很重要）。 script 1中的所有内容都会在script 2之前触发。这是一个例子：

<body>
    stuff
    <script>
        console.log('first');
        console.log('second');
    </script>
    <script>
        console.log('third');
    </script>
</body>

产量

first
second
third

如果代码是异步的（就像许多js一样），请求完成的顺序取决于回答请求的内容。

至于window.onload vs $(document).ready，这里有一个很好的答案：window.onload vs $(document).ready()

$（document）.ready（...）的调用堆栈是如何组合的？

2 个答案: