在 jQuery 中使用 setTimeout()

setTimeout() 是 JavaScript 内置函数，并非 jQuery 方法。你可以在 jQuery 代码中调用它，在延迟结束后更新元素、启动动画或安排其他操作。回调只运行一次；如果操作需要重复执行，请使用间隔计时器。

setTimeout() 在 jQuery 中的作用

浏览器会将回调安排在事件循环后续的一轮中执行。jQuery 不提供单独的计时器 API；它提供 .text() 和 .animate() 等便捷方法，供回调调用。所请求的延迟是回调具备运行条件前的最短等待时间，并不保证回调会在某个精确时刻运行。

setTimeout() 的语法和参数

函数形式为 setTimeout(callback, delay, ...args)。callback 是要调用的函数，delay 是等待的毫秒数；经过这段时间后，回调才具备运行条件。可选参数会传递给回调。建议使用函数作为回调，而不要传入代码字符串；字符串更难维护，也可能带来安全问题。

例如，下面这个独立的 JavaScript 示例展示了回调和延迟参数。此数据包未执行该示例，因此不声称观察到了任何输出：

本节中的代码以及显示的标签或输出仍为英文。

setTimeout(() => {
  console.log("The callback ran");
}, 1000);

延迟后运行 jQuery 代码

在已加载 jQuery 的页面中，可以在回调里调用 jQuery 方法。这个页面源码示例会在点击按钮并经过设定的延迟后，更改段落内容一次。这只是静态示意；它依赖浏览器 DOM，以及从网络加载的 jQuery 脚本，因此不声称有任何运行时输出。

本节中的代码以及显示的标签或输出仍为英文。

<p id="message">Waiting for an update.</p>
<button id="change">Change the message</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#change").on("click", function () {
    setTimeout(function () {
      $("#message").text("The delayed update ran.");
    }, 1000);
  });
</script>

每次点击都会开始一段延迟。用户如果连续点击多次，每次点击都会安排自己的回调；如果只希望最新一次请求生效，请保存并取消计时器句柄。

安排 jQuery 动画

你可以安排不同的 .animate() 调用，让它们在不同的时间点开始。若要按顺序执行动画，请考虑每段动画的持续时间：在首次点击后设为 2,000 毫秒的第二个计时器，并不会自动等到第一段动画完成后才开始。若要更清晰地控制顺序，可以在第一段动画的完成回调中安排下一步：$("#box").animate({ left: "+=100px" }, 1000, function () { $(this).animate({ top: "+=100px" }, 1000); });。此示例假设页面已加载 jQuery，且存在 ID 为 box 的元素，并且该元素的 CSS position 不是 static，例如设为 position: relative；运行动画前先设置好定位，这样 left 和 top 都能移动该元素。第一段动画请求移动一秒；其完成回调运行后，第二段动画才会开始。浏览器负载和渲染过程可能影响实际经过的时间。

取消已安排的计时器

保存 setTimeout() 返回的值，并在回调运行前将该句柄传给 clearTimeout()。在 jQuery 点击处理程序中，先声明 let timer;，再在 #start 处理程序中赋值 timer = setTimeout(function () { $("#message").text("The delayed update ran."); }, 3000);，并在 #cancel 处理程序中调用 clearTimeout(timer);。此语法示例假设页面有 ID 为 start、cancel 和 message 的元素，并且已加载 jQuery。clearTimeout() 可阻止待执行的回调运行，但无法撤销已经开始运行的回调。如果每次启动操作都会创建新计时器，请先决定是否取消之前的计时器，以免累积多个待执行的更新。

计时和计时器 ID

延迟设为 0 时，回调仍会异步安排执行；它不会在下一条语句之前以内联方式运行。如果队列中有其他工作或页面正忙，浏览器可能会在超过所请求的延迟后才运行回调。只有在需要取消已安排的回调时，才保存返回的计时器句柄，并将它传回 clearTimeout()；在此用法中无需了解句柄的具体表示形式。