Question

我以为我理解了setTimeout方法是如何工作的，但这让我很困惑。

test.html（我故意在jQuery文件之前加载test.js文件进行演示。假设jQuery文件是在本地托管的。）

<body>
// ...code
<div id="area"></div>
// ...code

<script src="test.js"></script>
<script src="jquery.js"></script>
</body>

test.js

$('#area').text('hello');

我理解在这种情况下“hello”不会在浏览器上打印，因为jQuery是在test.js文件之后加载的。切换这些文件的顺序可以解决问题。但是如果我单独保留订单并更改test.js文件，则setTimeout会使其工作：

function wait() {
    if(window.jQuery) {
        $('#area').text("hello");
    }
    else
    {
        setTimeout(wait, 10);
    }
}

wait();

在这种情况下，“hello”文本将打印在浏览器上。但是我有点挠头，因为不知何故jQuery文件确实被加载了。但是怎么样？为什么test.js文件永远不会被无限循环捕获，检查jQuery是否已加载？我很感激能够了解正在发生的事情的机制。

Answer 1

如果jQuery从未加载，将成为一个无限循环。但在正常情况下：

当然，做所有这些的更好方法是

<script src="jquery.js"></script>
<script src="test.js"></script>

// test.js
$(document).ready( 
  function() 
  {
     $('#area').text("hello");
  }
);

Answer 2

如果没有setTimeout()代码，当评估“test.js”的内容时，浏览器将立即遇到未定义$（jQuery）的问题。使用 setTimeout()，代码在验证符号是否已定义之前不会尝试使用全局jQuery符号。

没有setTimeout代码失败并出现运行时错误。另一个版本中的代码明确地测试了避免它的失败可能性。

Answer 3

为什么test.js文件永远不会被无限循环捕获，检查jQuery是否已加载？

setTimeout异步工作。它不会暂停浏览器。它只是要求它在一定的毫秒后执行某个函数。

jquery.js在 wait()次调用之间加载并执行。

Answer 4

setTimeOut方法在一个名为异步回调的单独队列中运行。所以一旦解释器到达这一行，代码就会被移动到一个单独的队列中并继续解析（然后执行jQuery.js）。执行此操作后，它会查找异步队列检查超时是否完成然后在setTimeout内执行的方法。到这时jQuery.js已经加载了。

Answer 5

JavaScript未预编译。它正在工作＆＃34;在飞行中＆＃34;。

您可以随时添加代码，包括加载整个库。一旦浏览器加载了一个外部JS文件，它就会解析它，并且它已经准备就绪了。

因此，如果您等待jQuery，并且确实有正确的代码加载它，它最终会被浏览器加载并运行。