javascript - 不理解 JS 中的这个 setTimeout

标签 javascript jquery

我以为我了解 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>

测试.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 是否已加载?如果能对正在发生的事情的机制有一些了解,我将不胜感激。

最佳答案

如果 jQuery 从未加载,是一个无限循环。但在正常情况下:

  1. 第一次通过时,jQuery 没有加载,所以我们 setTimeout() 1a.同时发生其他事情,包括加载 jQuery 等资源
  2. 10 毫秒后,我们再次检查。
  3. 现在加载 jQuery 了吗?如果没有,设置超时并返回第二步
  4. 在重试一些次数后,jQuery 确实加载了,我们开始了。

当然,做这一切的更好方法是

  1. 首先加载 jQuery
  2. ready() 处理程序中运行您的 wait() 函数,使其在需要时才运行。
<script src="jquery.js"></script>
<script src="test.js"></script>
// test.js
$(document).ready( 
  function() 
  {
     $('#area').text("hello");
  }
);

关于javascript - 不理解 JS 中的这个 setTimeout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33783320/

相关文章:

javascript - jQuery 监听器点击不起作用

javascript - 如何检测 youtube getCurrentTime() 中的变化?

javascript - 如何从匹配中仅获取完全匹配的字符串

jquery - 如何使用 css 设置框架集行属性?

jquery - 平滑的 Div 滚动暂停/播放

javascript - ES6 Promise 序列, token 的 XHR,然后再次 XHR

javascript - 如何使用 ".replace()"和 ".html()"将明文转换为图像标签?

jQuery .css() 在 Safari 中无法运行

javascript - 单击时获取具有自己的迭代按钮的输入值

c# - 使用 C# 或 Jquery 将多个 <br> 替换为单个 <br>