Question

我无法在堆栈溢出或互联网上找到javascript选择执行语句顺序的详细指南。

我有以下代码。当我在浏览器中附加调试器时，似乎按顺序执行。

var cvs = document.getElementById('cvs');
cvs.width = window.innerWidth;
cvs.height = window.innerHeight;
var w = window;
w.onresize = (event) => {
    cvs.width = window.innerWidth;
    cvs.height = window.innerHeight;
};

但是，会发生以下奇怪的行为：以cvs.width开头的行执行得很好。但是，以w.onresize开头的行不起作用，因为w为空。但是我可以检查先前执行的行var w = window;，我可以看到w和window都不是null。那么w和window都不是空的，直到下一行，那时它们是???

注意：人们正在响应异步执行。没有异步。事件处理程序从不首先附加，因为w或window或null。这不是并发问题，它是某种类型的脚本执行顺序和/或范围问题。

问题似乎与将脚本标记放在html中的错误位置有关？这是我的HTML：

HTML：

<html>
    <head></head>
<body>
    <div>
         <script src="bundle.js" />
    </div>
</body>
</html>

将脚本移出div改变了“shroedinger的窗口”的行为。

Answer 1

我能够通过更改我的.html页面上的bundle.js脚本加载到正文末尾的顺序来修复我的问题。它在一个div里面。在此之后，window两次都有值，而不是仅以var

开头的行

我认为这个问题没有任何有效的解释。唯一的解释是，这是标准的javascript古怪，退伍军人只是训练自己永远不会遇到。

很容易通过调试器或console.log语句一遍又一遍地演示，使用我所包含的代码，“this”，“document”和“window”等某些变量可以在一个上显示值代码行，只是在字面上的下一行代码上有一个空值。

如果有人有文档链接可以解释脚本加载顺序，页面加载顺序，脚本执行顺序和变量名称范围的奇怪综合，我会将其标记为答案。

Answer 2

我记得对类似问题感到困惑，本文中的一些解释确实清除了它： When is JavaScript synchronous?

正如您将从帖子中收集的那样，Javascript是同步和单线程的，这意味着它通常按照您呈现语句的顺序执行代码。

也就是说，JS处理外部事件的方式（例如，由返回数据或点击事件触发的AJAX调用的回调）是异步的。这意味着当清除执行堆栈时，JS引擎将检查代码正在侦听的事件（例如，从AJAX调用或按钮单击返回的数据），并在事件发生时执行与该事件关联的回调。收到 - 回调代码将同步运行。它不会中断任何正在执行的代码，并且在回调完成之前不会执行任何其他代码。

总而言之，正如所提供的帖子所说的那样，可以准确地说“JavaScript是同步的，带有各种回调机制的单线程。”

在javascript中执行脚本的顺序

2 个答案: