diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index ffba023f8e577b..3ac40c5cc84ce0 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -465,7 +465,6 @@ /zh-CN/docs/DOM/window.setImmediate /zh-CN/docs/Web/API/Window/setImmediate /zh-CN/docs/DOM/window.setInterval /zh-CN/docs/Web/API/Window/setInterval /zh-CN/docs/DOM/window.setTimeout /zh-CN/docs/Web/API/Window/setTimeout -/zh-CN/docs/DOM/window.setTimeout12 /zh-CN/docs/Web/API/Window/setTimeout /zh-CN/docs/DOM/文件系统API的基本概念 /zh-CN/docs/Web/API/File_and_Directory_Entries_API/Introduction /zh-CN/docs/DOM:HTMLDocument /zh-CN/docs/Web/API/HTMLDocument /zh-CN/docs/DOM:XMLDocument /zh-CN/docs/Web/API/XMLDocument diff --git a/files/zh-cn/games/anatomy/index.md b/files/zh-cn/games/anatomy/index.md index 1da1f77bf4aa57..e3cc95c2698ac9 100644 --- a/files/zh-cn/games/anatomy/index.md +++ b/files/zh-cn/games/anatomy/index.md @@ -209,17 +209,17 @@ var tNow = window.performance.now(); 一种常见的技术是以恒定的频率更新模拟，然后绘制尽可能多的（或尽可能少的）实际帧。更新方法可以继续循环，而不用考虑用户看到的内容。绘图方法可以查看最后的更新以及发生的时间。由于绘制知道何时表示，以及上次更新的模拟时间，它可以预测为用户绘制一个合理的框架。这是否比官方更新循环更频繁（甚至更不频繁）无关紧要。更新方法设置检查点，并且像系统允许的那样频繁地，渲染方法画出周围的时间。在 Web 标准中分离更新方法有很多种方法： -- 在 `requestAnimationFrame()` 中绘制，并在 {{domxref("Window.setInterval", "setInterval()")}} 或 {{domxref("setTimeout()")}} 中更新。 +- 在 `requestAnimationFrame()` 中绘制，并在 {{domxref("Window.setInterval", "setInterval()")}} 或 {{domxref("Window.setTimeout", "setTimeout()")}} 中更新。 - 即使在未聚焦或最小化的情况下，使用处理器时间，也可能是主线程，并且可能是传统游戏循环的工件（但是很简单）。 -- 绘制 `requestAnimationFrame` 并在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 的 `setInterval` 或 `setTimeout` 中对其进行更新。 +- 在 `requestAnimationFrame()` 中绘制，并在 [Web Worker](/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers) 的 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 或 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 中对其进行更新。 - 这与上述相同，除了更新不会使主线程（主线程也没有）。这是一个更复杂的解决方案，并且对于简单更新可能会有太多的开销。 -- 绘制 `requestAnimationFrame` 并使用它来戳一个包含更新方法的 Web Worker，其中包含要计算的刻度数（如果有的话）。 +- 在 `requestAnimationFrame()` 中绘制，并使用它来戳一个包含更新方法的 Web Worker，其中包含要计算的刻度数（如果有的话）。 - - 这个睡眠直到 `requestAnimationFrame` 被调用并且不会污染主线程，加上你不依赖于老式的方法。再次，这比以前的两个选项更复杂一些，并且*开始*每个更新将被阻止，直到浏览器决定启动 rAF 回调。 + - 这个睡眠直到 `requestAnimationFrame()` 被调用并且不会污染主线程，加上你不依赖于老式的方法。再次，这比以前的两个选项更复杂一些，并且*开始*每个更新将被阻止，直到浏览器决定启动 rAF 回调。 这些方法中的每一种都有类似的权衡： diff --git a/files/zh-cn/glossary/callback_function/index.md b/files/zh-cn/glossary/callback_function/index.md index 68449527ed5a7b..8ea7b8d21c8292 100644 --- a/files/zh-cn/glossary/callback_function/index.md +++ b/files/zh-cn/glossary/callback_function/index.md @@ -27,7 +27,7 @@ console.log(value); 如果 `doSomething` 同步调用回调，则最后一条语句将记录 `2`，因为 `value = 2` 是同步执行的；如果回调是异步的，最后一条语句将记录 `1`，因为 `value = 2` 将在 `console.log` 语句之后执行。 -同步回调的示例包括传递给 {{jsxref("Array.prototype.map()")}}、{{jsxref("Array.prototype.forEach()")}} 等的回调。异步回调的示例包括传递给 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 和 {{jsxref("Promise.prototype.then()")}} 的回调。 +同步回调的示例包括传递给 {{jsxref("Array.prototype.map()")}}、{{jsxref("Array.prototype.forEach()")}} 等的回调。异步回调的示例包括传递给 {{domxref("Window.setTimeout", "setTimeout()")}} 和 {{jsxref("Promise.prototype.then()")}} 的回调。 [使用 Promise](/zh-CN/docs/Web/JavaScript/Guide/Using_promises#时序) 指南提供了有关异步回调时序的更多信息。 diff --git a/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md b/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md index 157b08497dcd32..694edf93ed7579 100644 --- a/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md +++ b/files/zh-cn/learn/javascript/asynchronous/implementing_a_promise-based_api/index.md @@ -32,7 +32,7 @@ slug: Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API ### 用 setTimeout() 包裹 -我们将会使用 {{domxref("setTimeout()")}} 来实现 `alarm()` 函数。`setTimeout()` 以一个回调函数和一个以毫秒为单位的延迟作为参数。当调用 `setTimeout()` 时，它将启动一个设置为给定延迟的计时器，当时间过期时，它就会调用给定的回调函数。 +我们将会使用 {{domxref("Window.setTimeout", "setTimeout()")}} 来实现 `alarm()` 函数。`setTimeout()` 以一个回调函数和一个以毫秒为单位的延迟作为参数。当调用 `setTimeout()` 时，它将启动一个设置为给定延迟的计时器，当时间过期时，它就会调用给定的回调函数。 在下面的例子中，我们使用一个回调函数和一个 1000 毫秒的延迟调用 `setTimeout()`： @@ -205,7 +205,7 @@ button.addEventListener("click", async () => { ## 参见 -- [Promise() 构造器](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) -- [使用 Promises](/zh-CN/docs/Web/JavaScript/Guide/Using_promises) +- [`Promise()` 构造函数](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) +- [使用 promise](/zh-CN/docs/Web/JavaScript/Guide/Using_promises) {{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Introducing_workers", "Learn/JavaScript/Asynchronous")}} diff --git a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md index 7a4bc4ba8cc098..66b39998fe76b3 100644 --- a/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md +++ b/files/zh-cn/learn/tools_and_testing/client-side_javascript_frameworks/svelte_reactivity_lifecycle_accessibility/index.md @@ -506,7 +506,7 @@ const checkAllTodos = (completed) => { 在这种情况下，当 `editing` 是 `false` 时，编辑 `` 不可见，因为它不存在于 DOM 中。在 `onEdit()` 函数中，我们将 `editing` 设置为 `true`，然后立即尝试访问 `nameEl` 变量并执行 `nameEl.focus()`。问题在于，Svelte 还没有更新 DOM。 -解决这个问题的一种方法是使用 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 函数，延迟调用 `nameEl.focus()`，直到下一个事件循环，并给 Svelte 更新 DOM 的机会。 +解决这个问题的一种方法是使用 {{domxref("Window.setTimeout", "setTimeout()")}} 函数，延迟调用 `nameEl.focus()`，直到下一个事件循环，并给 Svelte 更新 DOM 的机会。 现在尝试一下这个解决方案： diff --git a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md index b0b43cba0c5c10..99ea93cf84e1a6 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/api/alarms/index.md @@ -2,12 +2,12 @@ title: alarms slug: Mozilla/Add-ons/WebExtensions/API/alarms l10n: - sourceCommit: b795bc99fc5c5d8a96c1b202a12750404085c28a + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{AddonSidebar}} -在未来一个特定的时间运行的计划任务代码。这很像 [`setTimeout()`](/zh-CN/docs/Web/API/WindowTimers/setTimeout)、{{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.setInterval()")}}，不过这些函数仅可以按需使用而不能在后台页面工作。 +在未来一个特定的时间运行的计划任务代码。这很像 {{domxref("Window.setTimeout()")}}、{{domxref("Window.setInterval()")}}，不过这些函数仅可以按需使用而不能在后台页面工作。 闹钟不会在浏览器会话之间持续存在。它们在单个扩展的所有上下文中全局创建。例如，在后台脚本中创建的闹钟将在后台脚本、选项页面、弹出页面和扩展标签页中触发 [`onAlarm`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/alarms/onAlarm) 事件（反之亦然）。闹钟 API 在[内容脚本](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#webextension_apis)中不可用。 diff --git a/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md b/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md index cd371430a14a9c..dd542fdc2def9a 100644 --- a/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/files/zh-cn/mozilla/add-ons/webextensions/content_scripts/index.md @@ -600,7 +600,7 @@ In page script, window.x: 1 In page script, window.y: undefined ``` -上述内容同样适用于 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout)、{{domxref("Window.setInterval", "setInterval()")}} 和 [`Function()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)。 +上述内容同样适用于 {{domxref("Window.setTimeout", "setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}} 和 [`Function()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)。 > [!WARNING] > 在页面的上下文中运行代码时要非常小心！ diff --git a/files/zh-cn/web/api/background_tasks_api/index.md b/files/zh-cn/web/api/background_tasks_api/index.md index f8a105eee17b9a..f1a0531e0504eb 100644 --- a/files/zh-cn/web/api/background_tasks_api/index.md +++ b/files/zh-cn/web/api/background_tasks_api/index.md @@ -26,47 +26,6 @@ slug: Web/API/Background_Tasks_API - **避免运行时间无法预测的任务**。你的空闲回调必须避免做任何占用时间不可预测的事情。比如说，应该避免做任何会影响页面布局的事情。你也必须避免 执行{{domxref("Promise")}} 的 `resolve` 和 `reject`，因为这会在你的回调函数返回后立即引用 Promise 对象对 `resolve` 和 `reject` 的处理程序。 - **在你需要的时候要用 timeout，但记得只在需要的时候才用**。使用 timeout 可以保证你的代码按时执行，但是在剩余时间不足以强制执行你的代码的同时保证浏览器的性能表现的情况下，timeout 就会造成延迟或者动画不流畅。 -### 回退到 setTimeout - -因为后台任务 API 还是相当新的，而你的代码可能需要在那些不仍不支持此 API 的浏览器上运行。你可以把 {{domxref("WindowTimers.setTimeout()", "setTimeout()")}} 用作回调选项来做这样的事。这个并不是 {{Glossary("polyfill")}} ，因为它在功能上并不相同；`setTimeout()` 并不会让你利用空闲时段，而是使你的代码在情况允许时执行你的代码，以使我们可以尽可能地避免造成用户体验性能表现延迟的后果。 - -```js -window.requestIdleCallback = - window.requestIdleCallback || - function (handler) { - let startTime = Date.now(); - - return setTimeout(function () { - handler({ - didTimeout: false, - timeRemaining: function () { - return Math.max(0, 50.0 - (Date.now() - startTime)); - }, - }); - }, 1); - }; -``` - -如果 {{domxref("Window.requestIdleCallback", "window.requestIdleCallback")}} 是 undefined, 我们在这里把它创建出来。这个函数首先会记录我们调用具体实现的时间。我们将用它计算填充程序 {{domxref("IdleDeadline.timeRemaining()", "timeRemaining()")}} 返回的值。 - -接着，我们调用 {{domxref("WindowTimers.setTimeout", "setTimeout()")}}，并给它传一个函数，在这个函数里，我们传给 `requestIdleCallback()` 的具体实现的回调会得以执行。这个回调会接收一个和 {{domxref("IdleDeadline")}} 相符合的 object，此 object 的 {{domxref("IdleDeadline.didTimeout", "didTimeout")}} 被设定为 false，并拥有一个 {{domxref("IdleDeadline.timeRemaining", "timeRemaining()")}} 方法，用来给回调函数 50 毫秒的开始时间。每次调用 `timeRemaining()`，它都会从开始的 50 毫秒中减去已逝去的时间，来确定还剩余的时间。 - -结果是，虽然我们的填充程序不会像真正的 `requestIdleCallback()` 将自己限制在当前事件循环传递中的空闲时间内，但它至少将每次传递的运行时间限制为不超过 50 毫秒。 - -我们 {{domxref("Window.cancelIdleCallback", "cancelIdleCallback()")}} 的具体实现要简单的多。 - -```js -window.cancelIdleCallback = - window.cancelIdleCallback || - function (id) { - clearTimeout(id); - }; -``` - -如果 `cancelIdleCallback()` 没有定义，它将创建一个来简单地把指定回调 ID 传递给 {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}}。 - -现在，尽管效率不高，你的代码也可以在不支持后台任务 API 的浏览器上运行了。 - ## 接口 后台任务 API 只添加了一个新的接口： diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md index 8cdff690f48a3b..38dbd2ec20bbdf 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_animations/index.md @@ -30,11 +30,11 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations ### 有安排地更新画布 -首先，可以用 {{domxref("Window.setInterval", "setInterval()")}}、{{domxref("window.setTimeout()")}} 和 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 来设定定期执行一个指定函数。 +首先，可以用 {{domxref("Window.setInterval", "setInterval()")}}、{{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 来设定定期执行一个指定函数。 - {{domxref("Window.setInterval", "setInterval()")}} - : 当设定好间隔时间后，function 会定期执行。 -- {{domxref("setTimeout()")}} +- {{domxref("Window.setTimeout", "setTimeout()")}} - : 在设定好的时间之后执行函数 - {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} - : 告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。 diff --git a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md index a75f9aca37bf7e..90d17a85e5ecb2 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/basic_usage/index.md @@ -105,7 +105,7 @@ if (canvas.getContext) { ``` -上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}}，或者其他任何事件处理程序来调用。 +上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("Window.setTimeout", "setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}}，或者其他任何事件处理程序来调用。 模板看起来会是这样。如这里所示，它最初是空白的。 diff --git a/files/zh-cn/web/api/document/scroll_event/index.md b/files/zh-cn/web/api/document/scroll_event/index.md index 5c06c21a89ec2c..c61668b3397b6a 100644 --- a/files/zh-cn/web/api/document/scroll_event/index.md +++ b/files/zh-cn/web/api/document/scroll_event/index.md @@ -27,7 +27,7 @@ onscroll = (event) => {}; ### Scroll 事件限流 -由于 `scroll` 事件可被高频触发，事件处理器不应该执行高性能消耗的操作，如 DOM 操作。而更推荐的做法是使用 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}、{{DOMxRef("setTimeout()")}} 或 {{DOMxRef("CustomEvent")}} 给事件限流，如下所述。 +由于 `scroll` 事件可被高频触发，事件处理器不应该执行高性能消耗的操作，如 DOM 操作。而更推荐的做法是使用 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}、{{DOMxRef("Window.setTimeout", "setTimeout()")}} 或 {{DOMxRef("CustomEvent")}} 给事件限流，如下所述。 然而需要注意的是，输入事件和动画帧的触发速度大致相同，因此通常不需要下述优化。此示例使用 `requestAnimationFrame` 优化 `scroll` 事件。 diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md index 1d4e1530366b77..7afe23565a56da 100644 --- a/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md +++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/in_depth/index.md @@ -11,7 +11,7 @@ JavaScript 本质上是一门单线程语言。对于在它被设计出来的那 当然，随着时间的流逝，计算机已经发展成为强大的多核系统，而 JavaScript 已经成为计算世界中使用最广泛的语言之一。大量最流行的应用程序至少有一部分是基于 JavaScript 代码的。为了支持这一点，有必要找到方法让项目摆脱单线程语言的限制。 -自从定时器（{{domxref("setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}}）加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐发展到包含任务调度、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 `queueMicrotask()` 会非常有作用。 +自从定时器（{{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}}）加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐发展到包含任务调度、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 `queueMicrotask()` 会非常有作用。 ## JavaScript 执行上下文 @@ -118,7 +118,7 @@ greetUser("Veronica"); #### 任务 vs 微任务 -一个**任务**就是指计划由标准机制来执行的任何 JavaScript，如程序的初始化、事件触发的回调等。除了使用事件，你还可以使用 {{domxref("setTimeout()")}} 或者 {{domxref("Window.setInterval", "setInterval()")}} 来添加任务。 +一个**任务**就是指计划由标准机制来执行的任何 JavaScript，如程序的初始化、事件触发的回调等。除了使用事件，你还可以使用 {{domxref("Window.setTimeout", "setTimeout()")}} 或者 {{domxref("Window.setInterval", "setInterval()")}} 来添加任务。 任务队列和微任务队列的区别很简单，但却很重要： diff --git a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md index 9856a89c23fd9f..8b93083e3ec4ec 100644 --- a/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md +++ b/files/zh-cn/web/api/html_dom_api/microtask_guide/index.md @@ -21,7 +21,7 @@ JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ - 一段新程序或子程序被直接执行时（比如从一个控制台，或在一个 {{HTMLElement("script")}} 元素中运行代码）。 - 触发了一个事件，将其回调函数添加到任务队列时。 -- 执行到一个由 {{domxref("setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 创建的 timeout 或 interval，以致相应的回调函数被添加到任务队列时。 +- 执行到一个由 {{domxref("Window.setTimeout", "setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 创建的 timeout 或 interval，以致相应的回调函数被添加到任务队列时。 事件循环驱动你的代码按照这些任务排队的顺序，一个接一个地处理它们。在事件循环的单次迭代中，将执行任务队列中最旧的可运行任务。之后，微任务将被执行，直到微任务队列为空，然后浏览器可以选择更新渲染。然后浏览器继续进行事件循环的下一次迭代。 diff --git a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md index db5f8dcd850215..67199fd5747e8d 100644 --- a/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md +++ b/files/zh-cn/web/api/notifications_api/using_the_notifications_api/index.md @@ -2,7 +2,7 @@ title: 使用 Notifications API slug: Web/API/Notifications_API/Using_the_Notifications_API l10n: - sourceCommit: 83ec73ac6fec9cae23c54b729e6481f50a0a45e7 + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{DefaultAPISidebar("Web Notifications")}}{{securecontext_header}} @@ -109,7 +109,7 @@ const notification = new Notification("待办列表", { body: text, icon: img }) ## 关闭通知 -使用 {{domxref("Notification.close","close()")}} 删除不再与用户相关的通知（例如，对于消息应用程序，用户已经阅读了网页上的通知） ，或者以下歌曲已在音乐应用程序中播放以通知歌曲更改）。大多数现代浏览器会在一段时间（大约四秒）后自动关闭通知，但这不是你通常应该关心的事情，因为它取决于用户和用户代理。删除通知也可能发生在操作系统级别，用户应该对此保持控制。旧版本的 Chrome 不会自动删除通知，因此你可以在 {{domxref("setTimeout()")}} 之后执行此操作，以免从其他浏览器的通知托盘中删除通知。 +使用 {{domxref("Notification.close","close()")}} 删除不再与用户相关的通知（例如，对于消息应用程序，用户已经阅读了网页上的通知） ，或者以下歌曲已在音乐应用程序中播放以通知歌曲更改）。大多数现代浏览器会在一段时间（大约四秒）后自动关闭通知，但这不是你通常应该关心的事情，因为它取决于用户和用户代理。删除通知也可能发生在操作系统级别，用户应该对此保持控制。旧版本的 Chrome 不会自动删除通知，因此你可以在 {{domxref("Window.setTimeout", "setTimeout()")}} 之后执行此操作，以免从其他浏览器的通知托盘中删除通知。 ```js const n = new Notification("我的歌"); diff --git a/files/zh-cn/web/api/page_visibility_api/index.md b/files/zh-cn/web/api/page_visibility_api/index.md index 8cea8d75463c9c..141ecb20b48473 100644 --- a/files/zh-cn/web/api/page_visibility_api/index.md +++ b/files/zh-cn/web/api/page_visibility_api/index.md @@ -34,20 +34,20 @@ slug: Web/API/Page_Visibility_API 在页面可见性 API 之外，用户代理会采取许多策略来减轻后台或隐藏选项卡对性能的影响。这些可能包括： - 大多数浏览器会停止向后台标签页或隐藏的 {{ HTMLElement("iframe") }} 发送 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 回调，以提高性能和电池寿命。 -- 在后台或不活动标签页中，{{domxref("setTimeout()")}} 等计时器会被节流，以帮助提高性能。详情请参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/setTimeout#实际延时比设定值更久的原因：最小延迟时间)。 -- 浏览器实施基于预算的后台超时节流。现代浏览器的操作方式大同小异，具体细节如下： +- 在后台或不活动标签页中，{{domxref("Window.setTimeout", "setTimeout()")}} 等计时器会被限流，以帮助提高性能。详情请参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)。 +- 浏览器实施基于预算的后台超时限流。现代浏览器的操作方式大同小异，具体细节如下： - 在 Firefox 中，后台标签页中的每个窗口都有自己的时间预算（以毫秒为单位），最大值和最小值分别为 +50 毫秒和 -150 毫秒。Chrome 浏览器与之非常相似，只是预算以秒为单位。 - - 窗口在 30 秒后会受到节流，节流延迟规则与为窗口定时器指定的规则相同（请再次参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/setTimeout#实际延时比设定值更久的原因：最小延迟时间)）。在 Chrome 浏览器中，该值为 10 秒。 + - 窗口在 30 秒后会受到限流，限流延迟规则与为窗口定时器指定的规则相同（请再次参阅[延迟时间超过指定时间的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)）。在 Chrome 浏览器中，该值为 10 秒。 - 只有当预算为非负数时，才允许执行定时器任务。 - 定时器代码一旦运行完毕，其执行时间就会从窗口的超时预算中扣除。 - 在 Firefox 和 Chrome 浏览器中，预算以每秒 10 毫秒的速度重新生成。 -某些进程不受这种节流行为的影响。在这种情况下，可以使用页面可见性 API 来减少标签页隐藏时对性能的影响。 +某些进程不受这种限流行为的影响。在这种情况下，可以使用页面可见性 API 来减少标签页隐藏时对性能的影响。 -- 正在播放音频的标签页被视为前台进程，不会被节流。 -- 运行使用实时网络连接（[WebSocket](/zh-CN/docs/Web/API/WebSockets_API) 和 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API)）的代码的标签页不会被节流，以避免关闭这些连接时超时和意外关闭。 -- 为了避免超时，[IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 进程也没有节流。 +- 正在播放音频的标签页被视为前台进程，不会被限流。 +- 运行使用实时网络连接（[WebSocket](/zh-CN/docs/Web/API/WebSockets_API) 和 [WebRTC](/zh-CN/docs/Web/API/WebRTC_API)）的代码的标签页不会被限流，以避免关闭这些连接时超时和意外关闭。 +- 为了避免超时，[IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 进程也没有限流。 ## 对其他接口的扩展 diff --git a/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md b/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md index 4cfe85bc59dc19..b717587ea4d353 100644 --- a/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md +++ b/files/zh-cn/web/api/web_animations_api/using_the_web_animations_api/index.md @@ -1,5 +1,5 @@ --- -title: Using the Web Animations API +title: 使用 Web 动画 API slug: Web/API/Web_Animations_API/Using_the_Web_Animations_API --- @@ -17,13 +17,13 @@ web 动画 API 可以让我们用 JavaScript 写动画并且控制动画。本 默认情况下，Firefox 48+ 和 Chrome 36+ 中提供了本文中讨论的基本 Web 动画 API 功能。Webkit 和 Edge 已经将 API 移动到各自的待办事项列表中，但是直到我们看到所有浏览器都有完整的支持，所以有一个便于维护的 polyfill（ [handy maintained polyfill](https://github.com/web-animations/web-animations-js)）可以测试功能支持，并在必要时添加它。 -## 用 web 动画 API 写 css 动画 +## 用 Web 动画 API 写 CSS 动画 学习 Web 动画 API 的更为熟悉的方法之一是从大多数网络开发人员开始使用以前的 CSS 动画。CSS 动画有一个熟悉的语法，很好地分解为演示目的。 -### The CSS version +### CSS 版本 -这是一个用 CSS 写的滚动动画，显示爱丽丝落下通向仙境的兔子洞 (see the full [code on Codepen](https://codepen.io/rachelnabors/pen/QyOqqW)): +这是一个用 CSS 写的滚动动画，显示爱丽丝落下通向仙境的兔子洞（参见 [Codepen 上的完整代码](https://codepen.io/rachelnabors/pen/QyOqqW)）： [![Alice Tumbling down the rabbit's hole.](tumbling-alice_optimized.gif)](https://codepen.io/rachelnabors/pen/rxpmJL) @@ -49,18 +49,18 @@ web 动画 API 可以让我们用 JavaScript 写动画并且控制动画。本 } ``` -这样可以以恒定的（线性 linear）速率在 3 秒内改变爱丽丝的颜色和变换的旋转，并无限循环。在 [@keyframes](/zh-CN/docs/Web/CSS/@keyframes) 块中，我们可以看到每个循环（约 0.9 秒）的 30％，Alice 的颜色从黑色变为深红色，然后在循环结束时再次返回。 +这样可以以恒定的（线性）速率在 3 秒内改变爱丽丝的颜色和变换的旋转，并无限循环。在 {{cssxref("@keyframes")}} 块中，我们可以看到每个循环（约 0.9 秒）的 30％，Alice 的颜色从黑色变为深红色，然后在循环结束时再次返回。 -### Moving it to JavaScript +### 将其移动到 JavaScript 现在让我们尝试使用 Web 动画 API 创建相同的动画。 -#### Representing keyframes +#### 表示关键帧 -我们首先要做的是创建一个对应于我们的 CSS @keyframes 块的关键帧对象： +我们首先要做的是创建一个对应于我们的 CSS {{cssxref("@keyframes")}} 块的关键帧对象： ```js -var aliceTumbling = [ +const aliceTumbling = [ { transform: "rotate(0) translate3D(-50%, -50%, 0)", color: "#000" }, { color: "#431236", offset: 0.3 }, { transform: "rotate(360deg) translate3D(-50%, -50%, 0)", color: "#000" }, @@ -77,10 +77,10 @@ var aliceTumbling = [ #### 表示时间属性 -我们还需要创建一个定时属性的对象 (an {{domxref("AnimationEffectTimingProperties")}} object) 对应于爱丽丝动画中的值： +我们还需要创建一个定时属性的对象对应于爱丽丝动画中的值： ```js -var aliceTiming = { +const aliceTiming = { duration: 3000, iterations: Infinity, }; @@ -88,8 +88,8 @@ var aliceTiming = { 你会注意到这里有一些差异，如何在 CSS 中表示等价的值： -- 一个，持续时间是毫秒，而不是秒 - 3000 不是 3 秒.。像{{domxref("WindowTimers.setTimeout()")}} 和{{domxref("Window.requestAnimationFrame()")}}, Web 动画 API 只支持毫秒。 -- The other thing you'll notice is that it's `iterations`, not `iteration-count`. +- 第一个是：持续时间是毫秒，而不是秒——3000 不是 3 秒。像 {{domxref("Window.setTimeout", "setTimeout()")}} 和{{domxref("Window.requestAnimationFrame()")}}，Web 动画 API 只支持毫秒。 +- 你会注意到的另一件事是，它是 `iterations`，而不是 `iteration-count`。 > [!NOTE] > CSS 动画中使用的属性值与 Web 动画中使用的属性值存在一些小的差异。比如，Web 动画中不能使用字符串“infinite”，而是使用 Javascript 的关键字 Infinity。以及我们用 `easing` 来代替`timing-function`。我们不必在这列出`easing`的值，因为不像在 CSS 动画里，默认的"[animation-timing-function](/zh-CN/docs/Web/CSS/animation-timing-function)"是`ease`。页面动画 API 的默认 easing 是`linear`— 而这就是我们想要的。 @@ -133,9 +133,9 @@ document.getElementById("alice").animate( ); ``` -## 使用 play()，pause()，reverse() 和 playbackRate 控制播放 +## 使用 play()、pause()、reverse() 和 updatePlaybackRate() 控制播放 -虽然我们可以使用 Web 动画 API 编写 CSS 动画，其中 API 真正派上用场的是操纵动画的播放。Web 动画 API 提供了一些控制播放的有用方法。让我们来看看在 Growing / Shrinking Alice 游戏中暂停和播放动画（请查看 Codepen 的完整代码 [full code on Codepen](https://codepen.io/rachelnabors/pen/PNYGZQ)）： +虽然我们可以使用 Web 动画 API 编写 CSS 动画，其中 API 真正派上用场的是操纵动画的播放。Web 动画 API 提供了一些控制播放的有用方法。让我们来看看在 Growing / Shrinking Alice 游戏中暂停和播放动画（请查看 [Codepen 上的完整代码](https://codepen.io/rachelnabors/pen/PNYGZQ)）： [![Playing the growing and shrinking game with Alice.](growing-shrinking_article_optimized.gif)](https://codepen.io/rachelnabors/pen/PNYGZQ?editors=0010) @@ -146,14 +146,14 @@ document.getElementById("alice").animate( 稍后我们会再讨论爱丽丝的动画，但现在我们来看看蛋糕的动画： ```js -var nommingCake = document +const nommingCake = document .getElementById("eat-me_sprite") .animate( [{ transform: "translateY(0)" }, { transform: "translateY(-80%)" }], { fill: "forwards", easing: "steps(4, end)", - duration: aliceChange.effect.timing.duration / 2, + duration: aliceChange.effect.getComputedTiming().duration / 2, }, ); ``` @@ -173,16 +173,16 @@ nommingCake.play(); 特别地，我们想将其链接到爱丽丝的动画，所以当蛋糕被吃掉时，她变得更大。我们可以通过以下功能来实现： ```js -var growAlice = function () { - // Play Alice's animation. +const growAlice = () => { + // 播放爱丽丝的动画。 aliceChange.play(); - // Play the cake's animation. + // 播放蛋糕的动画。 nommingCake.play(); }; ``` -当用户握住鼠标或者在触摸屏上按住他们的手指在蛋糕上时，我们现在可以调用 growAlice 来使所有动画发挥作用： +当用户握住鼠标或者在触摸屏上按住他们的手指在蛋糕上时，我们现在可以调用 `growAlice` 来使所有动画发挥作用： ```js cake.addEventListener("mousedown", growAlice, false); @@ -200,7 +200,7 @@ cake.addEventListener("touchstart", growAlice, false); 让我们先来看一下 playbackRate——一个负值的播放速度将导致一个动画反向播放。当爱丽丝从瓶中喝酒时，她越来越小。这是因为瓶子将动画的播放速度从 1 更改为 -1： ```js -var shrinkAlice = function () { +const shrinkAlice = () => { aliceChange.playbackRate = -1; aliceChange.play(); }; @@ -227,8 +227,8 @@ setInterval(function () { 但是通过点击或点击来敦促他们使他们通过乘以播放速度来加快速度： ```js -var goFaster = function () { - redQueen_alice.playbackRate *= 1.1; +const goFaster = () => { + redQueen_alice.updatePlaybackRate(redQueen_alice.playbackRate * 1.1); }; document.addEventListener("click", goFaster); @@ -252,13 +252,15 @@ document.getAnimations().forEach(function (animation) { 另一件与 CSS 动画有关的难点就是创建依赖于其他动画提供的值。例如，在“成长和收缩爱丽丝”游戏的例子中，你可能会注意到蛋糕的持续时间有些奇怪： ```js -duration: aliceChange.effect.timing.duration / 2; +document.getElementById("eat-me_sprite").animate([], { + duration: aliceChange.effect.timing.duration / 2, +}); ``` 要了解这里发生了什么，让我们来看看 Alice 的动画： ```js -var aliceChange = document +const aliceChange = document .getElementById("alice") .animate( [ @@ -296,11 +298,11 @@ aliceChange.currentTime = aliceChange.effect.timing.duration / 2; 当设置蛋糕和瓶子的持续时间时，我们可以做同样的事情： ```js -var drinking = document +const drinking = document .getElementById("liquid") .animate([{ height: "100%" }, { height: "0" }], { fill: "forwards", - duration: aliceChange.effect.timing.duration / 2, + duration: aliceChange.effect.getComputedTiming().duration / 2, }); drinking.pause(); ``` @@ -310,37 +312,33 @@ drinking.pause(); 我们还可以使用 Web 动画 API 来确定动画当前的时间。当你用尽蛋糕吃或者清空瓶子时，游戏就结束了。哪个角色扮演者取决于爱丽丝在她的动画中有多远，无论她是否变得太大，不能进入小门太小，无法达到打开门的钥匙。我们可以弄清楚她是否在动画的大端或小端，让她的动画当前时间 ([`currentTime`](/zh-CN/docs/Web/API/Animation/currentTime)) 被她的 activeDuration 分成： ```js -var endGame = function() { - +const endGame = () => { // get Alice's timeline's playhead location - var alicePlayhead = aliceChange.currentTime; - var aliceTimeline = aliceChange.effect.activeDuration; + const alicePlayhead = aliceChange.currentTime; + const aliceTimeline = aliceChange.effect.getComputedTiming().activeDuration; // stops Alice's and other animations stopPlayingAlice(); // depending on which third it falls into - var aliceHeight = alicePlayhead/aliceTimeline; + const aliceHeight = alicePlayhead / aliceTimeline; - if (aliceHeight <= .333){ + if (aliceHeight <= 0.333) { // Alice got smaller! - ... - - } else if (aliceHeight >= .666) { + // … + } else if (aliceHeight >= 0.666) { // Alice got bigger! - ... - + // … } else { // Alice didn't change significantly - ... - + // … } -} +}; ``` > **备注：** `getAnimations()` and `effect` are not fully supported as of this writing, but the polyfill does support them today. -## Callbacks and promises +## 回调和 promise CSS 动画和转换有自己的事件侦听器，这些也可以通过 Web 动画 API： @@ -367,7 +365,7 @@ Prefer promises? The Web Animations API also specifies two promises: [`onfinish` 这些是 Web 动画 API 的基本功能，其中大部分功能已在最新版本的 Firefox 和 Chrome 中得到支持。到目前为止，你应该准备好在浏览器中“跳下兔子洞”，动画制作动画实验！如果你正在使用 API 并要共享，请尝试使用#WAAPI 主题标签。我们将会观看并且将编写更多的教程来涵盖更多的功能，支持传播！ -## See also +## 参见 - The [full suite of Alice in Wonderland demos](https://codepen.io/collection/bpEza/) on CodePen for you to play with, fork, and share - [Animating like you just don’t care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) — a great article to read that explains more on the background of the Web Animations API, and why it is more performant than other web animation methods diff --git a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md index 715d862ff4255c..7fb3618ed3e6ae 100644 --- a/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md +++ b/files/zh-cn/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -17,25 +17,25 @@ slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers 一些函数在所有的 worker 和主线程中均可用（来自 `WindowOrWorkerGlobalScope`）： -- {{domxref("WorkerGlobalScope.atob()", "atob()")}} -- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} -- {{domxref("clearTimeout()")}} -- {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}} -- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}} -- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}} -- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}} -- {{domxref("reportError()")}} -- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} -- {{domxref("setTimeout()")}} -- {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} -- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker） -- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}（仅专用 worker） +- {{domxref("WorkerGlobalScope.atob()")}} +- {{domxref("WorkerGlobalScope.btoa()")}} +- {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("WorkerGlobalScope.clearTimeout()")}} +- {{domxref("WorkerGlobalScope.createImageBitmap()")}} +- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}} +- {{domxref("WorkerGlobalScope.fetch()")}} +- {{domxref("WorkerGlobalScope.queueMicrotask()")}} +- {{domxref("WorkerGlobalScope.reportError()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.setTimeout()")}} +- {{domxref("WorkerGlobalScope.structuredClone()")}} +- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}（仅专用 worker） +- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}（仅专用 worker） 以下函数**仅**在 worker 中可用： -- {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}}（所有的 worker） -- {{domxref("DedicatedWorkerGlobalScope.postMessage")}}（仅专用 worker） +- {{domxref("WorkerGlobalScope.importScripts()")}}（所有的 worker） +- {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}（仅专用 worker） ## Worker 中可用的 Web API diff --git a/files/zh-cn/web/api/web_workers_api/index.md b/files/zh-cn/web/api/web_workers_api/index.md index 00bc080338ff5d..1962761be5b3b6 100644 --- a/files/zh-cn/web/api/web_workers_api/index.md +++ b/files/zh-cn/web/api/web_workers_api/index.md @@ -38,24 +38,24 @@ worker 在一个与当前 {{DOMxRef("window")}} 不同的全局上下文中运 所有 worker 和主线程（来自 `WindowOrWorkerGlobalScope`）共有的一些函数（子集）是： -- {{domxref("WorkerGlobalScope.atob()", "atob()")}} -- {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} -- {{domxref("clearTimeout()")}} -- {{domxref("WorkerGlobalScope.createImageBitmap()", "createImageBitmap()")}} -- {{domxref("WorkerGlobalScope.dump()", "dump()")}} {{non-standard_inline}} -- {{domxref("WorkerGlobalScope.fetch()", "fetch()")}} -- {{domxref("WorkerGlobalScope.queueMicrotask()", "queueMicrotask()")}} -- {{domxref("reportError()")}} -- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} -- {{domxref("setTimeout()")}} -- {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} -- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker） -- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()", "cancelAnimationFrame()")}}（仅专用 worker） +- {{domxref("WorkerGlobalScope.atob()")}} +- {{domxref("WorkerGlobalScope.btoa()")}} +- {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("WorkerGlobalScope.clearTimeout()")}} +- {{domxref("WorkerGlobalScope.createImageBitmap()")}} +- {{domxref("WorkerGlobalScope.dump()")}} {{non-standard_inline}} +- {{domxref("WorkerGlobalScope.fetch()")}} +- {{domxref("WorkerGlobalScope.queueMicrotask()")}} +- {{domxref("WorkerGlobalScope.reportError()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.setTimeout()")}} +- {{domxref("WorkerGlobalScope.structuredClone()")}} +- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}}（仅专用 worker） +- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}}（仅专用 worker） 以下函数**仅**对 worker 可用： -- {{domxref("WorkerGlobalScope.importScripts", "WorkerGlobalScope.importScripts()")}}（所有 worker） +- {{domxref("WorkerGlobalScope.importScripts()")}}（所有 worker） - {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}（仅限专用 worker） ### 支持的 Web API diff --git a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md index 392b1f145c8671..b10c96ebe6ba7f 100644 --- a/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md +++ b/files/zh-cn/web/api/web_workers_api/using_web_workers/index.md @@ -1,5 +1,5 @@ --- -title: 使用 Web Workers +title: 使用 Web Worker slug: Web/API/Web_Workers_API/Using_web_workers --- @@ -9,16 +9,16 @@ Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的 本文详细介绍了如何使用 web worker。 -## Web Workers API +## Web Worker API 一个 worker 是使用一个构造函数创建的一个对象（例如 {{domxref("Worker.Worker", "Worker()")}}）运行一个命名的 JavaScript 文件——这个文件包含将在 worker 线程中运行的代码; worker 运行在另一个全局上下文中，不同于当前的{{domxref("window")}}。因此，在 {{domxref("Worker")}} 内通过 {{domxref("window")}} 获取全局作用域（而不是{{domxref("window.self","self")}}）将返回错误。 在专用 worker 的情况下，{{domxref("DedicatedWorkerGlobalScope")}} 对象代表了 worker 的上下文（专用 worker 是指标准 worker 仅在单一脚本中被使用；共享 worker 的上下文是 {{domxref("SharedWorkerGlobalScope")}} 对象）。一个专用 worker 仅能被首次生成它的脚本使用，而共享 worker 可以同时被多个脚本使用。 > [!NOTE] -> 参见 [Web Workers API 落地页](/zh-CN/docs/Web/API/Web_Workers_API)以获取 worker 的参考文档和更多指引。 +> 参见 [Web Worker API 落地页](/zh-CN/docs/Web/API/Web_Workers_API)以获取 worker 的参考文档和更多指引。 -在 worker 线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在 worker 内，不能直接操作 DOM 节点，也不能使用 {{domxref("window")}} 对象的默认方法和属性。但是你可以使用大量 `window` 对象之下的东西，包括 [WebSockets](/zh-CN/docs/Web/API/WebSockets_API)，以及 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 等数据存储机制。查看 [Web Workers 可以使用的函数和类](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) 获取详情。 +在 worker 线程中你可以运行任何你喜欢的代码，不过有一些例外情况。比如：在 worker 内，不能直接操作 DOM 节点，也不能使用 {{domxref("window")}} 对象的默认方法和属性。但是你可以使用大量 `window` 对象之下的东西，包括 [WebSockets](/zh-CN/docs/Web/API/WebSockets_API)，以及 [IndexedDB](/zh-CN/docs/Web/API/IndexedDB_API) 等数据存储机制。查看 [Web Worker 可以使用的函数和类](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)获取详情。 workers 和主线程间的数据传递通过这样的消息机制进行——双方都使用 `postMessage()` 方法发送各自的消息，使用 `onmessage` 事件处理函数来响应消息（消息被包含在 [`message`](/zh-CN/docs/Web/API/BroadcastChannel/message_event) 事件的 data 属性中）。这个过程中数据并不是被共享而是被复制。 @@ -136,7 +136,7 @@ importScripts("foo.js", "bar.js"); /* 引入两个脚本 */ importScripts("//example.com/hello.js"); /* 你可以从其他来源导入脚本 */ ``` -浏览器加载并运行每一个列出的脚本。每个脚本中的全局对象都能够被 worker 使用。如果脚本无法加载，将抛出 `NETWORK_ERROR` 异常，接下来的代码也无法执行。而之前执行的代码（包括使用 {{domxref("setTimeout()")}} 异步执行的代码）依然能够运行。`importScripts()` **之后**的函数声明依然会被保留，因为它们始终会在其他代码之前运行。 +浏览器加载并运行每一个列出的脚本。每个脚本中的全局对象都能够被 worker 使用。如果脚本无法加载，将抛出 `NETWORK_ERROR` 异常，接下来的代码也无法执行。而之前执行的代码（包括使用 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 异步执行的代码）依然能够运行。`importScripts()` **之后**的函数声明依然会被保留，因为它们始终会在其他代码之前运行。 > [!NOTE] > 脚本的下载顺序不固定，但执行时会按照传入 `importScripts()` 中的文件名顺序进行。这个过程是同步完成的；直到所有脚本都下载并运行完毕，`importScripts()` 才会返回。 @@ -814,23 +814,23 @@ worker 将属性 `onmessage` 设置为一个函数，当 worker 对象调用 `po - {{domxref("Navigator")}} - {{domxref("WorkerGlobalScope.fetch", "fetch()")}} - {{jsxref("Global_Objects/Array", "Array")}}、{{jsxref("Global_Objects/Date", "Date")}}、{{jsxref("Global_Objects/Math", "Math")}} 和 {{jsxref("Global_Objects/String", "String")}} -- {{domxref("setTimeout()")}} 和 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} +- {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 和 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 在一个 worker 中最主要的你*不能*做的事情就是直接影响父页面。包括操作父页面的节点以及使用页面中的对象。你只能间接地实现，通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 回传消息给主脚本，然后从主脚本那里执行操作或变化。 > [!NOTE] -> 你可以使用网站测试一个方法是否对 worker 可用： 。例如，如果你在 Firefox 84 的网站上输入 {{domxref("EventSource")}}，你会发现在 service worker 不支持这个方法，但在专用和共享 worker 中支持。 +> 你可以使用网站测试一个方法是否对 worker 可用：。例如，如果你在 Firefox 84 的网站上输入 {{domxref("EventSource")}}，你会发现在 service worker 不支持这个方法，但在专用和共享 worker 中支持。 > [!NOTE] -> 获取 worker 中完整的方法列表，请参阅 [worker 可用的方法和接口](/zh-CN/docs/Web/Reference/Functions_and_classes_available_to_workers)。 +> 获取 worker 中完整的方法列表，请参阅 [worker 可用的方法和接口](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers)。 ## 规范 {{Specifications}} -## 相关链接 +## 参见 - {{domxref("Worker")}} 接口 - {{domxref("SharedWorker")}} 接口 -- [worker 可用的方法](/zh-CN/docs/Web/API/Worker/Functions_and_classes_available_to_workers) +- [worker 可用的方法](/zh-CN/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers) - {{domxref("OffscreenCanvas")}} 接口 diff --git a/files/zh-cn/web/api/window/clearinterval/index.md b/files/zh-cn/web/api/window/clearinterval/index.md index 02aecb5fd1d84f..52d73a7f1e95d0 100644 --- a/files/zh-cn/web/api/window/clearinterval/index.md +++ b/files/zh-cn/web/api/window/clearinterval/index.md @@ -2,7 +2,7 @@ title: Window：clearInterval() 方法 slug: Web/API/Window/clearInterval l10n: - sourceCommit: 1b45c29b1aefa5e128e901fb3b8b5c10750da232 + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{ApiRef("HTML DOM")}} @@ -20,7 +20,7 @@ clearInterval(intervalID) - `intervalID` - : 你要取消的重复操作的标识符。这个 ID 是由对应的 `setInterval()` 调用返回的。 -值得一提的是，{{domxref("Window.setInterval", "setInterval()")}} 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。 +值得一提的是，{{domxref("Window.setInterval", "setInterval()")}} 和 {{domxref("Window.setTimeout()", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("Window.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。 ### 返回值 @@ -40,7 +40,7 @@ clearInterval(intervalID) ## 参见 -- {{domxref("clearTimeout()")}} -- {{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.setInterval()")}} - {{domxref("WorkerGlobalScope.clearInterval()")}} -- {{domxref("Window.cancelAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} +- {{domxref("Window.clearTimeout()")}} +- {{domxref("Window.cancelAnimationFrame()")}} diff --git a/files/zh-cn/web/api/window/cleartimeout/index.md b/files/zh-cn/web/api/window/cleartimeout/index.md index 5c138bc3265533..7a4d25f0d19416 100644 --- a/files/zh-cn/web/api/window/cleartimeout/index.md +++ b/files/zh-cn/web/api/window/cleartimeout/index.md @@ -1,12 +1,15 @@ --- -title: clearTimeout() +title: Window：clearTimeout() 方法 slug: Web/API/Window/clearTimeout -original_slug: Web/API/clearTimeout +l10n: + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{APIRef("HTML DOM")}} -`WindowOrWorkerGlobalScope` 内置的 **`clearTimeout()`** 方法取消了先前通过调用{{domxref("setTimeout()")}}建立的定时器。 +{{domxref("Window")}} 接口的 **`clearTimeout()`** 方法取消先前通过调用 {{domxref("Window.setTimeout()")}} 建立的超时任务。 + +如果参数未标识之前创建的操作，则此方法不执行任何动作。 ## 语法 @@ -17,48 +20,49 @@ clearTimeout(timeoutID) ### 参数 - `timeoutID` - - : 你要取消定时器的标识符。该 ID 由相应的`setTimeout()`调用返回。 + - : 你要取消定时器的标识符。该 ID 由相应的 `setTimeout()` 调用返回。 + +值得注意的是，{{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}} 共享同一个 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("Window.clearInterval", "clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。 -值得注意的是，{{domxref("setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}} 共享同一个 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("Window.clearInterval", "clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。 +### 返回值 + +无（{{jsxref("undefined")}}）。 ## 示例 -在一个网页中运行如下脚本，并且点击一次页面。一秒钟后你会看见弹出一条信息。如果你在一秒内不停点击页面，弹出框将不再出现。 +在一个网页中运行如下脚本，并且点击一次页面。一秒钟后你会看见一条弹出的信息。如果你在一秒内不停点击页面，警报框将不再出现。 ```js -var alarm = { - remind: function (aMessage) { +const alarm = { + remind(aMessage) { alert(aMessage); - delete this.timeoutID; + this.timeoutID = undefined; }, - setup: function () { - this.cancel(); - var self = this; - this.timeoutID = window.setTimeout( - function (msg) { - self.remind(msg); + setup() { + if (typeof this.timeoutID === "number") { + this.cancel(); + } + + this.timeoutID = setTimeout( + (msg) => { + this.remind(msg); }, 1000, - "Wake up!", + "醒醒！", ); }, - cancel: function () { - if (typeof this.timeoutID == "number") { - window.clearTimeout(this.timeoutID); - delete this.timeoutID; - } + cancel() { + clearTimeout(this.timeoutID); }, }; -window.onclick = function () { - alarm.setup(); -}; +window.addEventListener("click", () => alarm.setup()); ``` -## 注意 +## 备注 -传入一个错误的 ID 给 `clearTimeout()`不会有任何影响；也不会抛出异常。 +传入一个无效的 ID 给 `clearTimeout()` 不会有任何影响；也不会抛出异常。 ## 规范 @@ -70,6 +74,7 @@ window.onclick = function () { ## 参见 -- {{domxref("setTimeout()")}} -- {{domxref("Window.clearInterval()")}} 和 {{domxref("WorkerGlobalScope.clearInterval()")}} -- {{domxref("Window.cancelAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} +- {{domxref("Window.setTimeout()")}} +- {{domxref("WorkerGlobalScope.clearTimeout()")}} +- {{domxref("Window.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} diff --git a/files/zh-cn/web/api/window/index.md b/files/zh-cn/web/api/window/index.md index 36c9736b792156..b719ac4f26709a 100644 --- a/files/zh-cn/web/api/window/index.md +++ b/files/zh-cn/web/api/window/index.md @@ -134,7 +134,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承属性。_ - `window[0]`、`window[1]` 等 - : 以逐帧形式返回对 `window` 对象的引用，要了解更多细节，参见 {{domxref("Window.frames")}}。 -### 已废弃属性 +### 已弃用的属性 - {{domxref("Window.event")}} {{Deprecated_Inline}} {{ReadOnlyInline}} - : 返回**当前事件**，即当前由 JavaScript 代码的上下文处理的事件，如果当前没有事件被处理，则返回 `undefined`。应尽可能使用直接传递给事件处理程序的 {{domxref("Event")}} 对象来代替。 @@ -169,8 +169,8 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 取消使用 `setImmediate()` 设置的重复执行任务。 - {{domxref("Window.clearInterval()")}} - : 取消使用 {{domxref("Window.setInterval()")}} 设置的重复执行任务。 -- {{domxref("clearTimeout()", "Window.clearTimeout()")}} - - : 取消使用 {{domxref("setTimeout()")}} 设置的延时执行任务。 +- {{domxref("Window.clearTimeout()")}} + - : 取消使用 {{domxref("Window.setTimeout()")}} 设置的延时执行任务。 - {{domxref("Window.close()")}} - : 关闭当前窗口。 - {{domxref("Window.confirm()")}} @@ -237,7 +237,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 安排一个函数，在给定的毫秒数过去后执行。 - {{domxref("Window.setResizable()")}} {{Non-standard_Inline}} - : 切换用户调整窗口大小的能力。 -- {{domxref("setTimeout", "Window.setTimeout()")}} +- {{domxref("Window.setTimeout()")}} - : 安排函数在给定的时间内执行。 - {{domxref("Window.sizeToContent()")}} {{Non-standard_Inline}} - : 根据窗口的内容确定其大小。 @@ -252,7 +252,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - {{domxref("Window.updateCommands()")}} {{Non-standard_Inline}} - : 更新当前 chrome 窗口（用户界面）的命令状态。 -### 已废弃方法 +### 已弃用的方法 - {{domxref("Window.back()")}} {{Non-standard_Inline}} {{Deprecated_Inline}} - : 在窗口历史中后退一步。该方法已被废弃，应该使用 {{domxref("History.back", "history.back()")}} 代替。 diff --git a/files/zh-cn/web/api/window/requestidlecallback/index.md b/files/zh-cn/web/api/window/requestidlecallback/index.md index f6dd6b6e21d7ad..1bf8b6f843143c 100644 --- a/files/zh-cn/web/api/window/requestidlecallback/index.md +++ b/files/zh-cn/web/api/window/requestidlecallback/index.md @@ -45,10 +45,10 @@ requestIdleCallback(callback, options) {{Compat}} -## 查看更多 +## 参见 -- {{domxref("window.cancelIdleCallback()")}} +- {{domxref("Window.cancelIdleCallback()")}} - {{domxref("IdleDeadline")}} -- {{domxref("window.setTimeout()")}} -- {{domxref("window.setInterval()")}} -- {{domxref("window.requestAnimationFrame")}} +- {{domxref("Window.setTimeout()")}} +- {{domxref("Window.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} diff --git a/files/zh-cn/web/api/window/setimmediate/index.md b/files/zh-cn/web/api/window/setimmediate/index.md index a2c9525527e869..21004c761a3577 100644 --- a/files/zh-cn/web/api/window/setimmediate/index.md +++ b/files/zh-cn/web/api/window/setimmediate/index.md @@ -1,9 +1,9 @@ --- -title: window.setImmediate +title: Window：setImmediate() 方法 slug: Web/API/Window/setImmediate --- -{{APIRef("HTML DOM")}}{{Non-standard_header}} +{{APIRef("HTML DOM")}} {{deprecated_header}}{{non-standard_header}} 该方法用来把一些需要长时间运行的操作放在一个回调函数里，在浏览器完成后面的其他语句后，就立刻执行这个回调函数。 @@ -21,15 +21,15 @@ var immediateID = setImmediate(func); ## 备注 -{{ domxref("window.clearImmediate") }} 方法可以用来取消通过 setImmediate 设置的将要执行的语句，就像 {{ domxref("window.clearTimeout") }} 对应于 {{ domxref("window.setTimeout") }}一样。 +{{DOMxRef("Window.clearImmediate", "clearImmediate()")}} 方法可以用来取消通过 setImmediate 设置的将要执行的语句，就像 {{DOMxRef("Window.clearTimeout", "clearTimeout()")}} 对应于 {{DOMxRef("Window.setTimeout", "setTimeout()")}} 一样。 -该方法可以用来替代 `setTimeout(fn, 0)` 去执行[繁重的操作](http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/)([heavy operations](http://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/)) +该方法可以用来替代 `setTimeout(fn, 0)` 去执行[繁重的操作](https://humanwhocodes.com/blog/2009/08/11/timed-array-processing-in-javascript/)。 -可以通过以下几种方式来模仿该功能： +可以通过以下几种方式来模拟该特性： -- {{ domxref("window.postMessage") }} 可以被用来触发一个 immediate 但会产生回调。请注意，Internet Explorer 8 包含 postMessage 的同步版本，这意味着它不能被用来作为代替品。 +- {{DOMxRef("Window.postMessage", "postMessage()")}} 可以被用来触发一个 immediate 但会产生回调。请注意，Internet Explorer 8 包含 postMessage 的同步版本，这意味着它不能被用来作为代替品。 - [MessageChannel](/zh-CN/docs/Web/API/MessageChannel) 可以在 Web Workers 内部很好的被使用，而 postMessage 的语义意味着它不能在那使用。 -- `setTimeout(fn, 0)`_可以使用_, 然而按照[HTML 规范](https://html.spec.whatwg.org/multipage/webappapis.html#timers), 嵌套深度超过 5 级的定时器，会被限制在 4ms , 他没有为 setImmediate 的天然及时性提供合适的 polyfill. +- `setTimeout(fn, 0)` *可以*使用，然而按照 [HTML 规范](https://html.spec.whatwg.org/multipage/webappapis.html#timers)，嵌套深度超过 5 级的定时器，会被限制在 4 浩渺，它没有为 `setImmediate` 的天然及时性提供合适的 polyfill。 所有这些技术都被纳入 [robust setImmediate polyfill](https://github.com/NobleJS/setImmediate) 中。 @@ -37,10 +37,9 @@ var immediateID = setImmediate(func); {{Compat}} -## 相关链接 +## 参见 -{{ domxref("window.clearImmediate") }} - -[Specification: Efficient Script Yielding](https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/setImmediate/Overview.html) - -[Microsoft setImmediate API Demo](http://ie.microsoft.com/testdrive/Performance/setImmediateSorting/Default.html) +- [`core-js` 中 `setImmediate` 的 polyfill](https://github.com/zloirock/core-js#setimmediate) +- [Microsoft `setImmediate` API 演示](https://jphpsf.github.io/setImmediate-shim-demo/) +- {{DOMxRef("Window.clearImmediate()")}} +- {{DOMxRef("Window.requestIdleCallback()")}} diff --git a/files/zh-cn/web/api/window/setinterval/index.md b/files/zh-cn/web/api/window/setinterval/index.md index 841bd21b00b82b..d6ad554973123a 100644 --- a/files/zh-cn/web/api/window/setinterval/index.md +++ b/files/zh-cn/web/api/window/setinterval/index.md @@ -2,7 +2,7 @@ title: Window：setInterval() 方法 slug: Web/API/Window/setInterval l10n: - sourceCommit: 1cefd237f7e20b060020324904fec16bef3ebbec + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{ApiRef("HTML DOM")}} @@ -39,7 +39,7 @@ setInterval(func, delay, arg1, arg2, /* …, */ argN) 返回值 `intervalID` 是一个非零数值，用来标识调用 `setInterval()` 创建的定时器；这个值可以用来传递给 {{domxref("Window.clearInterval", "clearInterval()")}} 来清除定时器。 -值得注意的是，`setInterval()` 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。 +值得注意的是，`setInterval()` 和 {{domxref("Window.setTimeout", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("Window.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。 > [!NOTE] > 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒（大约 24.8 天）以内，因为它在 IDL 中被指定为一个有符号整数。 @@ -158,17 +158,17 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 相同的错误 `setInterval()` 函数通常用于为重复执行的函数设置一个时间间隔（例如：动画）。你可以使用 {{domxref("Window.clearInterval", "clearInterval()")}} 取消定时器。 -如果你希望在指定的延迟后，仅执行*一次*函数，请使用 {{domxref("setTimeout()")}}。 +如果你希望在指定的延迟后，仅执行*一次*函数，请使用 {{domxref("Window.setTimeout", "setTimeout()")}}。 ### 延迟限制 定时器是可以嵌套的；这意味着，`setInterval()` 的回调中可以嵌入对 `setInterval()` 的调用以创建另一个定时器，即使第一个定时器还在运行。为了减轻这对性能产生的潜在影响，一旦定时器嵌套超过 5 层深度，浏览器将自动强制设置定时器的最小时间间隔为 4 毫秒。如果尝试将深层嵌套中调用 `setInterval()` 的延迟设定为小于 4 毫秒的值，其将被固定为 4 毫秒。 -在某些情况下，浏览器可能会强制执行更严格的最小时间间隔限制，尽管这些情况是不常见的。另外，请注意每次调用回调函数之间经过的实际时间可能会比给定的 `delay` 长；有关的示例，请参见[实际延时比设定值更久的原因](/zh-CN/docs/Web/API/setTimeout#延时比指定值更长的原因)。 +在某些情况下，浏览器可能会强制执行更严格的最小时间间隔限制，尽管这些情况是不常见的。另外，请注意每次调用回调函数之间经过的实际时间可能会比给定的 `delay` 长；有关的示例，请参见[实际延时比设定值更久的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)。 ### 确保执行时间短于定时器时间间隔 -如果你的代码逻辑执行时间可能比定时器时间间隔要长，建议你使用递归调用了 {{domxref("setTimeout()")}} 的具名函数。例如，使用 `setInterval()` 以 5 秒的间隔轮询服务器，可能因网络延迟、服务器无响应以及许多其他的问题而导致请求无法在分配的时间内完成。因此，你可能会发现排队的 XHR 请求没有按顺序返回。 +如果你的代码逻辑执行时间可能比定时器时间间隔要长，建议你使用递归调用了 {{domxref("Window.setTimeout", "setTimeout()")}} 的具名函数。例如，使用 `setInterval()` 以 5 秒的间隔轮询服务器，可能因网络延迟、服务器无响应以及许多其他的问题而导致请求无法在分配的时间内完成。因此，你可能会发现排队的 XHR 请求没有按顺序返回。 在这些场景下，应首选递归调用 `setTimeout()` 的模式： @@ -195,7 +195,6 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 相同的错误 ## 参见 - [`core-js` 中 `setInterval` 的 polyfill，支持向回调函数传递参数](https://github.com/zloirock/core-js#settimeout-and-setinterval) -- {{domxref("setTimeout()")}} -- {{domxref("Window.clearInterval()")}} 和 {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.clearInterval()")}} - {{domxref("WorkerGlobalScope.setInterval()")}} -- {{domxref("Window.requestAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} +- {{domxref("Window.setTimeout()")}} diff --git a/files/zh-cn/web/api/window/settimeout/index.md b/files/zh-cn/web/api/window/settimeout/index.md index 6bbac97de0e201..9a555078a74a28 100644 --- a/files/zh-cn/web/api/window/settimeout/index.md +++ b/files/zh-cn/web/api/window/settimeout/index.md @@ -1,12 +1,13 @@ --- -title: setTimeout() 全局函数 +title: Window：setTimeout() 方法 slug: Web/API/Window/setTimeout -original_slug: Web/API/setTimeout +l10n: + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{APIRef("HTML DOM")}} -全局的 **`setTimeout()`** 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。 +{{domxref("Window")}} 接口的 **`setTimeout()`** 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。 ## 语法 @@ -18,32 +19,31 @@ setTimeout(functionRef) setTimeout(functionRef, delay) setTimeout(functionRef, delay, param1) setTimeout(functionRef, delay, param1, param2) -setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN) +setTimeout(functionRef, delay, param1, param2, /* …, */ paramN) ``` ### 参数 - `functionRef` - - : 当定时器到期后，将要执行的 {{jsxref("function")}}。 + - : 当定时器到期后要执行的{{jsxref("function", "函数", "", 1)}}。 - `code` - - : 这是一个可选语法，允许你包含在定时器到期后编译和执行的字符串而非函数。使用该语法是**不推荐的**，原因和使用 {{jsxref("Global_Objects/eval", "eval()")}} 一样，有安全风险。 + - : 这是一个代替语法，允许你包含在定时器到期后编译和执行的字符串而非函数。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以**不推荐**使用。 - `delay` {{optional_inline}} - : 定时器在执行指定的函数或代码之前应该等待的时间，单位是毫秒。如果省略该参数，则使用值 0，意味着“立即”执行，或者更准确地说，在下一个事件循环执行。 注意，无论是哪种情况，实际延迟可能会比预期长一些，参见下方[延时比指定值更长的原因](#延时比指定值更长的原因)一节的叙述。 - 还要注意的是，如果值不是数字，隐含的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地对该值进行转换，使其成为一个数字——这可能导致意想不到的、令人惊讶的结果；见[非数字延迟值被静默地强制转化为数字](#非数字延迟值被静默地强制转化为数字)以了解一个示例。 + 还要注意的是，如果值不是数字，隐式的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地将其转换为数字——这可能导致意想不到的、令人惊讶的结果；参见[非数字延迟值被静默地强制转化为数字](#非数字延迟值被静默地强制转化为数字)以获取示例。 -- `param1`, …, `paramN` {{optional_inline}} - - - : 附加参数，一旦定时器到期，它们会作为参数传递给 `functionRef` 指定的函数。 +- `param1`、……、`paramN` {{optional_inline}} + - : 会被传递给由 `functionRef` 指定的函数的附加参数。 ### 返回值 -返回值 `timeoutID` 是一个正整数，表示由 `setTimeout()` 调用创建的定时器的编号。这个值可以传递给 {{domxref("clearTimeout","clearTimeout()")}} 来取消该定时器。 +返回值 `timeoutID` 是一个正整数，表示由 `setTimeout()` 调用创建的定时器的标识符。可以将这个值传递给 {{domxref("Window.clearTimeout","clearTimeout()")}} 来取消该定时器。 -保证 `timeoutID` 值不会被同一对象（window 或 worker）的后续调用 `setTimeout()` 或 `setInterval()` 重复使用。然而，不同的对象使用不同的 ID 池。 +在定时器仍然激活的情况下，保证 `timeoutID` 值不会被同一窗口（window）中的后续 `setTimeout()` 或 `setInterval()` 调用重复使用。然而，不同的对象使用不同的 ID 池。 ## 描述 @@ -53,7 +53,7 @@ setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN) ### 非数字延迟值被静默地强制转化为数字 -如果调用 `setTimeout()` 的 [_delay_](#delay) 值不是数字，隐含的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地对该值进行转换，使其成为数字。例如，下面的代码在 _delay_ 值中错误地使用了字符串 `"1000"`，而不是数字 `1000`——但它仍然有效，因为当代码运行时，字符串被强制转换成数字 `1000`，所以代码在 1 秒后执行。 +如果调用 `setTimeout()` 的 [_delay_](#delay) 值不是数字，隐式的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地将其转换为数字。例如，下面的代码在 _delay_ 值中错误地使用了字符串 `"1000"`，而不是数字 `1000`——但它仍然有效，因为当代码运行时，字符串被强制转换成数字 `1000`，所以代码在 1 秒后执行。 ```js example-bad setTimeout(() => { @@ -109,23 +109,25 @@ setTimeout(() => { 当你向 `setTimeout()` 传递一个函数时，该函数中的 `this` 指向跟你的期望可能不同，这个问题在 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference/Operators/this#回调)中进行了详细解释。 -由 `setTimeout()` 执行的代码是从一个独立于调用 `setTimeout` 的函数的执行环境中调用的。为被调用的函数设置 `this` 关键字的通常规则适用，如果你没有在调用中或用 `bind` 设置 `this`，它将默认为 `window`（或 `global`）对象。它将与调用 `setTimeout` 的函数的 `this` 值不一样。 +由 `setTimeout()` 执行的代码是从一个独立于调用 `setTimeout` 的函数的执行环境中调用的。为被调用的函数设置 `this` 关键字的通常规则适用，如果你没有在调用中或用 `bind` 设置 `this`，它将默认为 `window`（或 `global`）对象（甚至是在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)中）。它将与调用 `setTimeout` 的函数的 `this` 值不一样。 + +请看以下示例： ```js -const myArray = ["zero", "one", "two"]; +const myArray = ["零", "一", "二"]; myArray.myMethod = function (sProperty) { console.log(arguments.length > 0 ? this[sProperty] : this); }; -myArray.myMethod(); // 输出 "zero,one,two" -myArray.myMethod(1); // 输出 "one" +myArray.myMethod(); // 输出“零，一，二” +myArray.myMethod(1); // 输出“一” ``` 上面这段代码正常工作，当调用 `myArray` 时，它的 `this` 设定为 `myArray`，故在函数中 `this[sProperty]` 与 `myArray[sProperty]` 等价。然而，在以下示例中： ```js -setTimeout(myArray.myMethod, 1.0 * 1000); // 在 1 秒后输出 "[object Window]" -setTimeout(myArray.myMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出 "undefined" +setTimeout(myArray.myMethod, 1.0 * 1000); // 在 1 秒后输出“[object Window]” +setTimeout(myArray.myMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出“undefined” ``` 传递给 `setTimeout` 的是 `myArray.myMethod` 函数，当调用它的时候，`this` 没有指向，故其默认指向 `window` 对象。 @@ -146,10 +148,10 @@ setTimeout.call(myArray, myArray.myMethod, 2.5 * 1000, 2); // 同样会出错 ```js setTimeout(function () { myArray.myMethod(); -}, 2.0 * 1000); // 在 2 秒后输出 "zero,one,two" +}, 2.0 * 1000); // 在 2 秒后输出“零，一，二” setTimeout(function () { myArray.myMethod("1"); -}, 2.5 * 1000); // 在 2.5 秒后输出 "one" +}, 2.5 * 1000); // 在 2.5 秒后输出“一” ``` 包装函数也可以是箭头函数： @@ -157,10 +159,10 @@ setTimeout(function () { ```js setTimeout(() => { myArray.myMethod(); -}, 2.0 * 1000); // 在 2 秒后输出 "zero,one,two" +}, 2.0 * 1000); // 在 2 秒后输出“零，一，二” setTimeout(() => { myArray.myMethod("1"); -}, 2.5 * 1000); // 在 2.5 秒后输出 "one" +}, 2.5 * 1000); // 在 2.5 秒后输出“一” ``` ##### 使用 bind() @@ -168,15 +170,15 @@ setTimeout(() => { 或者，也可以使用 {{jsxref("Function.bind()", "bind()")}} 来为所有对特定函数的调用设置 `this` 的值： ```js -const myArray = ["zero", "one", "two"]; +const myArray = ["零", "一", "二"]; const myBoundMethod = function (sProperty) { console.log(arguments.length > 0 ? this[sProperty] : this); }.bind(myArray); -myBoundMethod(); // 输出 "zero,one,two"。因为 'this' 在函数中绑定到了 myArray -myBoundMethod(1); // 输出 "one" -setTimeout(myBoundMethod, 1.0 * 1000); // 由于绑定问题，还是在 1 秒后输出 "zero,one,two" -setTimeout(myBoundMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出 "one" +myBoundMethod(); // 输出“零，一，二”。因为“this”在函数中绑定到了 myArray +myBoundMethod(1); // 输出“一” +setTimeout(myBoundMethod, 1.0 * 1000); // 由于绑定问题，还是在 1 秒后输出“零，一，二” +setTimeout(myBoundMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出“一” ``` ### 传递字符串字面量 @@ -185,13 +187,13 @@ setTimeout(myBoundMethod, 1.5 * 1000, "1"); // 在 1.5 秒后输出 "one" ```js example-bad // 不要这样做 -setTimeout("console.log('Hello World!');", 500); +setTimeout("console.log('你好世界！');", 500); ``` ```js example-good // 这样做 setTimeout(() => { - console.log("Hello World!"); + console.log("你好世界！"); }, 500); ``` @@ -199,7 +201,7 @@ setTimeout(() => { ### 延时比指定值更长的原因 -有很多因素会导致 setTimeout 的回调函数执行比设定的预期值更久，本节将讨论最常见的原因。 +有很多因素会导致超时比设定的预期值更久，本节将讨论最常见的原因。 #### 嵌套超时 @@ -243,7 +245,7 @@ function run() { // 初始化迭代次数和开始时间戳 iterations = 10; last = new Date().getMilliseconds(); - // 开启计时器 + // 开启定时器 setTimeout(timeout, 0); } @@ -280,17 +282,17 @@ table { #### 非活动标签的超时 -为了优化后台标签的加载损耗（以及降低耗电量），浏览器会在非活动标签中强制执行一个最小的超时延迟。如果一个页面正在使用网络音频 API {{domxref("AudioContext")}} 播放声音，也可以不执行该延迟。 +为了优化后台标签的加载损耗（以及降低耗电量），浏览器会在非活动标签中强制执行一个最小的超时延迟。如果一个页面正在使用 Web 音频 API {{domxref("AudioContext")}} 播放声音，也可以不执行该延迟。 这方面的具体情况与浏览器有关： - Firefox 桌面版和 Chrome 针对不活动标签都有一个 1 秒的最小超时值。 - 安卓版 Firefox 浏览器对不活动的标签有一个至少 15 分钟的超时，并可能完全卸载它们。 -- 如果标签中包含 {{domxref("AudioContext")}}，Firefox 不会对非活动标签进行节流。 +- 如果标签中包含 {{domxref("AudioContext")}}，Firefox 不会对非活动标签进行限流。 -#### 追踪型脚本的节流 +#### 追踪型脚本的限流 -Firefox 对它识别为追踪型脚本的脚本实施额外的节流。当在前台运行时，节流的最小延迟仍然是 4ms。然而，在后台标签中，节流的最小延迟是 10000 毫秒，即 10 秒，在文档首次加载后 30 秒开始生效。 +Firefox 对它识别为追踪型脚本的脚本实施额外的限流。当在前台运行时，限流的最小延迟仍然是 4 毫秒。然而，在后台标签中，限流的最小延迟是 10000 毫秒（即 10 秒），在文档首次加载后 30 秒开始生效。 参见[跟踪保护](https://wiki.mozilla.org/Security/Tracking_protection)以了解更多信息。 @@ -313,11 +315,11 @@ setTimeout 之后 foo 被调用 ``` -出现这个结果的原因是，尽管 `setTimeout` 以 0ms 的延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。 +出现这个结果的原因是，尽管 `setTimeout` 以零延迟来调用函数，但这个任务已经被放入了队列中并且等待下一次执行；并不是立即执行；队列中的等待函数被调用之前，当前代码必须全部运行完毕，因此这里运行结果并非预想的那样。 ### 在加载页面时推迟超时 -当前标签页正在加载时，Firefox 将推迟触发 `setTimeout()` 计时器。直到主线程被认为是空闲的（类似于 [window.requestIdleCallback()](/zh-CN/docs/Web/API/Window/requestIdleCallback)），或者直到加载事件触发完毕，才开始触发。 +当前标签页正在加载时，Firefox 将推迟触发 `setTimeout()` 计时器。直到主线程被认为是空闲的（类似于 {{domxref("Window.requestIdleCallback()")}}），或者直到加载事件触发完毕，才开始触发。 ### WebExtension 背景页面和定时器 @@ -327,6 +329,20 @@ foo 被调用 浏览器内部以 32 位带符号整数存储延时。这就会导致如果一个延时大于 2147483647 毫秒（大约 24.8 天）时就会溢出，导致定时器将会被立即执行。 +```js +setTimeout(() => console.log("你好！"), 2 ** 32 - 5000); +``` + +导致立刻执行超时（因为 `2**32 - 5000` 溢出为负数），而以下代码： + +```js +setTimeout(() => console.log("hi!"), 2 ** 32 + 5000); +``` + +导致大约在 5 秒后执行超时。 + +**备注**：这与 Node.js 中 `setTimeout` 的行为不符，Node.js 中任何大于 2147483647 毫秒的超时都会立即执行。 + ## 示例 ### 设定和清除超时 @@ -371,7 +387,7 @@ function clearMessage() { {{EmbedLiveSample('设定和清除超时')}} -也可以看看 [`clearTimeout()` 的示例](/zh-CN/docs/Web/API/clearTimeout#示例)。 +参见 {{domxref("Window.clearTimeout", "clearTimeout()")}} 的示例。 ## 规范 @@ -384,7 +400,8 @@ function clearMessage() { ## 参见 - [`core-js` 中允许向回调函数传递参数的 `setTimeout` 版本的 polyfill](https://github.com/zloirock/core-js#settimeout-and-setinterval) -- {{domxref("clearTimeout()")}} -- {{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.setInterval()")}} -- {{domxref("Window.requestAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} -- {{domxref("Window.queueMicrotask()")}} 和 {{domxref("WorkerGlobalScope.queueMicrotask()")}} +- {{domxref("Window.clearTimeout()")}} +- {{domxref("WorkerGlobalScope.setTimeout()")}} +- {{domxref("Window.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} +- {{domxref("Window.queueMicrotask()")}} diff --git a/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md b/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md index fd14de1602ddbf..053e7af1096948 100644 --- a/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md +++ b/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md @@ -2,7 +2,7 @@ title: WorkerGlobalScope：clearInterval() 方法 slug: Web/API/WorkerGlobalScope/clearInterval l10n: - sourceCommit: 1b45c29b1aefa5e128e901fb3b8b5c10750da232 + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} @@ -20,7 +20,7 @@ clearInterval(intervalID) - `intervalID` - : 你要取消的重复操作的标识符。这个 ID 是由对应的 `setInterval()` 调用返回的。 -值得一提的是，{{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。 +值得一提的是，{{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 和 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("WorkerGlobalScope.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。 ### 返回值 @@ -40,7 +40,7 @@ clearInterval(intervalID) ## 参见 -- {{domxref("clearTimeout()")}} -- {{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.setInterval()")}} - {{domxref("Window.clearInterval()")}} -- {{domxref("Window.cancelAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.clearTimeout()")}} +- {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/zh-cn/web/api/workerglobalscope/cleartimeout/index.md b/files/zh-cn/web/api/workerglobalscope/cleartimeout/index.md new file mode 100644 index 00000000000000..a35d6fa3f4a8fc --- /dev/null +++ b/files/zh-cn/web/api/workerglobalscope/cleartimeout/index.md @@ -0,0 +1,52 @@ +--- +title: WorkerGlobalScope：clearTimeout() 方法 +slug: Web/API/WorkerGlobalScope/clearTimeout +l10n: + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +{{domxref("WorkerGlobalScope")}} 接口的 **`clearTimeout()`** 方法取消先前通过调用 {{domxref("setTimeout()")}} 建立的超时任务。 + +如果参数未标识之前创建的操作，则此方法不执行任何动作。 + +## 语法 + +```js-nolint +clearTimeout(timeoutID) +``` + +### 参数 + +- `timeoutID` + - : 你要取消定时器的标识符。该 ID 由相应的 `setTimeout()` 调用返回。 + +值得注意的是，{{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 和 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 共享同一个 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。 + +### 返回值 + +无（{{jsxref("undefined")}}）。 + +## 示例 + +参见 {{domxref("Window.clearTimeout()")}} 以获取示例。 + +## 备注 + +传入一个无效的 ID 给 `clearTimeout()` 不会有任何影响；也不会抛出异常。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("Window.clearTimeout()")}} +- {{domxref("WorkerGlobalScope.setTimeout()")}} +- {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} diff --git a/files/zh-cn/web/api/workerglobalscope/setinterval/index.md b/files/zh-cn/web/api/workerglobalscope/setinterval/index.md index 39ba0746cffdd8..66ff2abfb9086c 100644 --- a/files/zh-cn/web/api/workerglobalscope/setinterval/index.md +++ b/files/zh-cn/web/api/workerglobalscope/setinterval/index.md @@ -2,7 +2,7 @@ title: WorkerGlobalScope：setInterval() 方法 slug: Web/API/WorkerGlobalScope/setInterval l10n: - sourceCommit: 1cefd237f7e20b060020324904fec16bef3ebbec + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} @@ -41,7 +41,7 @@ setInterval(func, delay, arg1, arg2, /* …, */ argN) 返回值 `intervalID` 是一个非零数值，用来标识调用 `setInterval()` 创建的定时器；这个值可以用来传递给 {{domxref("Window.clearInterval", "clearInterval()")}} 来清除定时器。 -值得注意的是，`setInterval()` 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。 +值得注意的是，`setInterval()` 和 {{domxref("WorkerGlobalScope.setTimeout", "setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("WorkerGlobalScope.clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。 > [!NOTE] > 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒（大约 24.8 天）以内，因为它在 IDL 中被指定为一个有符号整数。 @@ -61,7 +61,7 @@ setInterval(func, delay, arg1, arg2, /* …, */ argN) ## 参见 - [`core-js` 中 `setInterval` 的 polyfill，支持向回调函数传递参数](https://github.com/zloirock/core-js#settimeout-and-setinterval) -- {{domxref("setTimeout()")}} -- {{domxref("Window.clearInterval()")}} 和 {{domxref("WorkerGlobalScope.clearInterval()")}} - {{domxref("Window.setInterval()")}} -- {{domxref("Window.requestAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} +- {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("WorkerGlobalScope.setTimeout()")}} +- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} diff --git a/files/zh-cn/web/api/workerglobalscope/settimeout/index.md b/files/zh-cn/web/api/workerglobalscope/settimeout/index.md new file mode 100644 index 00000000000000..1b56080fa4f8d9 --- /dev/null +++ b/files/zh-cn/web/api/workerglobalscope/settimeout/index.md @@ -0,0 +1,71 @@ +--- +title: WorkerGlobalScope：setTimeout() 方法 +slug: Web/API/WorkerGlobalScope/setTimeout +l10n: + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +{{domxref("WorkerGlobalScope")}} 接口的 **`setTimeout()`** 方法设置一个定时器，一旦定时器到期，就会执行一个函数或指定的代码片段。 + +## 语法 + +```js-nolint +setTimeout(code) +setTimeout(code, delay) + +setTimeout(functionRef) +setTimeout(functionRef, delay) +setTimeout(functionRef, delay, param1) +setTimeout(functionRef, delay, param1, param2) +setTimeout(functionRef, delay, param1, param2, /* …, */ paramN) +``` + +### 参数 + +- `functionRef` + - : 当定时器到期后要执行的{{jsxref("function", "函数", "", 1)}}。 +- `code` + - : 这是一个代替语法，允许你包含在定时器到期后编译和执行的字符串而非函数。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以**不推荐**使用。 +- `delay` {{optional_inline}} + + - : 定时器在执行指定的函数或代码之前应该等待的时间，单位是毫秒。如果省略该参数，则使用值 0，意味着“立即”执行，或者更准确地说，在下一个事件循环执行。 + + 注意，无论是哪种情况，实际延迟可能会比预期长一些，参见[延时比指定值更长的原因](/zh-CN/docs/Web/API/Window/setTimeout#延时比指定值更长的原因)。 + + 还要注意的是，如果值不是数字，隐式的[类型强制转换](/zh-CN/docs/Glossary/Type_coercion)会静默地将其转换为数字——这可能导致意想不到的、令人惊讶的结果；参见[非数字延迟值被静默地强制转化为数字](/zh-CN/docs/Web/API/Window/setTimeout#非数字延迟值被静默地强制转化为数字)以获取示例。 + +- `param1`、……、`paramN` {{optional_inline}} + - : 会被传递给由 `functionRef` 指定的函数的附加参数。 + +### 返回值 + +返回值 `timeoutID` 是一个正整数，表示由 `setTimeout()` 调用创建的定时器的标识符。可以将这个值传递给 {{domxref("Window.clearTimeout","clearTimeout()")}} 来取消该定时器。 + +在定时器仍然激活的情况下，保证 `timeoutID` 值不会被同一 worker 中的后续 `setTimeout()` 或 `setInterval()` 调用重复使用。然而，不同的对象使用不同的 ID 池。 + +## 描述 + +参见 {{domxref("Window.setTimeout()")}} 以获取详细的描述。 + +## 示例 + +参见 {{domxref("Window.setTimeout()")}} 以获取示例。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`core-js` 中允许向回调函数传递参数的 `setTimeout` 版本的 polyfill](https://github.com/zloirock/core-js#settimeout-and-setinterval) +- {{domxref("Window.setTimeout()")}} +- {{domxref("WorkerGlobalScope.clearTimeout()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} +- {{domxref("WorkerGlobalScope.queueMicrotask()")}} diff --git a/files/zh-cn/web/html/element/input/button/index.md b/files/zh-cn/web/html/element/input/button/index.md index 68b42294e84f8b..f9f2a43d82a897 100644 --- a/files/zh-cn/web/html/element/input/button/index.md +++ b/files/zh-cn/web/html/element/input/button/index.md @@ -112,7 +112,7 @@ function updateButton() { #### 设置禁用属性 -你可以在运行时通过设置 `disabled` 为 `true` 或 `false` 来启用和禁用按钮。在这个例子中，我们的按钮一开始是启用的，但如果你按下它，就会用 `button.disabled = true` 将其禁用。然后，一个 {{domxref("setTimeout()")}} 函数被用来在两秒后将按钮重置为启用状态。 +你可以在运行时通过设置 `disabled` 为 `true` 或 `false` 来启用和禁用按钮。在这个例子中，我们的按钮一开始是启用的，但如果你按下它，就会用 `button.disabled = true` 将其禁用。然后，一个 {{domxref("Window.setTimeout", "setTimeout()")}} 函数被用来在两秒后将按钮重置为启用状态。 ```html diff --git a/files/zh-cn/web/javascript/event_loop/index.md b/files/zh-cn/web/javascript/event_loop/index.md index bac2e812e10863..349d467837e7b5 100644 --- a/files/zh-cn/web/javascript/event_loop/index.md +++ b/files/zh-cn/web/javascript/event_loop/index.md @@ -69,7 +69,7 @@ while (queue.waitForMessage()) { 在浏览器里，每当一个事件发生并且有一个事件监听器绑定在该事件上时，一个消息就会被添加进消息队列。如果没有事件监听器，这个事件将会丢失。所以当一个带有点击事件处理器的元素被点击时，就会像其他事件一样产生一个类似的消息。 -函数 [`setTimeout`](/zh-CN/docs/Web/API/Window/setTimeout) 接受两个参数：待加入队列的消息和一个时间值（可选，默认为 0）。这个时间值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其他消息并且栈为空，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其他消息，`setTimeout` 消息必须等待其他消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。 +函数 {{domxref("Window.setTimeout", "setTimeout()")}} 接受两个参数：待加入队列的消息和一个时间值（可选，默认为 0）。这个时间值代表了消息被实际加入到队列的最小延迟时间。如果队列中没有其他消息并且栈为空，在这段延迟时间过去之后，消息会被马上处理。但是，如果有其他消息，`setTimeout` 消息必须等待其他消息处理完。因此第二个参数仅仅表示最少延迟时间，而非确切的等待时间。 下面的例子演示了这个概念（`setTimeout` 并不会在计时器到期之后直接执行）： diff --git a/files/zh-cn/web/javascript/guide/using_promises/index.md b/files/zh-cn/web/javascript/guide/using_promises/index.md index 3b891cfb145dd7..3e66724513474b 100644 --- a/files/zh-cn/web/javascript/guide/using_promises/index.md +++ b/files/zh-cn/web/javascript/guide/using_promises/index.md @@ -435,15 +435,15 @@ for (const f of [func1, func2, func3]) { 可以通过 Promise 的构造函数从零开始创建 {{jsxref("Promise")}}。这种方式（通过构造函数的方式）应当只在封装旧 API 的时候用到。 -理想状态下，所有的异步函数应该会返回 Promise。但有一些 API 仍然使用旧方式来传入成功（或者失败）的回调。最典型的例子就是 {{domxref("WindowTimers.setTimeout", "setTimeout()")}} 函数： +理想状态下，所有的异步函数应该会返回 Promise。但有一些 API 仍然使用旧方式来传入成功（或者失败）的回调。最典型的例子就是 {{domxref("Window.setTimeout", "setTimeout()")}} 函数： ```js setTimeout(() => saySomething("10 秒钟过去了"), 10 * 1000); ``` -混用旧式回调和 Promise 可能会造成运行时序问题。如果 `saySomething` 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 `setTimeout`。 +混用旧式回调和 Promise 可能会造成运行时序问题。如果 `saySomething` 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 `setTimeout()`。 -幸运地是，我们可以将 `setTimeout` 封装入 Promise 内。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们： +幸运地是，我们可以将 `setTimeout()` 封装入 Promise 内。最好的做法是，将这些有问题的函数封装起来，留在底层，并且永远不要再直接调用它们： ```js const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms)); @@ -453,7 +453,7 @@ wait(10 * 1000) .catch(failureCallback); ``` -通常，Promise 的构造函数接收一个执行函数（executor），我们可以在这个执行函数里手动地解决（resolve）或拒绝（reject）一个 Promise。既然 `setTimeout` 并不会真的执行失败，那么我们可以在这种情况下忽略拒绝的情况。你可以在 [`Promise()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) 参考中查看更多关于执行函数的信息。 +通常，Promise 的构造函数接收一个执行函数（executor），我们可以在这个执行函数里手动地解决（resolve）或拒绝（reject）一个 Promise。既然 `setTimeout()` 并不会真的执行失败，那么我们可以在这种情况下忽略拒绝的情况。你可以在 [`Promise()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) 参考中查看更多关于执行函数的信息。 ## 时序 @@ -510,7 +510,7 @@ console.log(1); // 1, 2, 3, 4 ### 任务队列 vs. 微任务 -Promise 回调被处理为[微任务](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide)，而 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 回调被处理为任务队列。 +Promise 回调被处理为[微任务](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide)，而 {{domxref("Window.setTimeout", "setTimeout()")}} 回调被处理为任务队列。 ```js const promise = new Promise((resolve, reject) => { diff --git a/files/zh-cn/web/javascript/javascript_technologies_overview/index.md b/files/zh-cn/web/javascript/javascript_technologies_overview/index.md index 4eddbad69222d6..633a7efb50a09c 100644 --- a/files/zh-cn/web/javascript/javascript_technologies_overview/index.md +++ b/files/zh-cn/web/javascript/javascript_technologies_overview/index.md @@ -82,7 +82,7 @@ HTML 规范同时还约束了元素之间的关系，例如无序列表 {{htmlel ## 其他值得关注的 API -- [`setTimeout`](/zh-CN/docs/Web/API/setTimeout) 和 {{domxref("Window.setInterval", "setInterval()")}} 函数最早被定义在 HTML 标准的 {{domxref("Window")}} 接口下。 +- {{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}} 函数最早被定义在 HTML 标准的 {{domxref("Window")}} 接口下。 - [XMLHttpRequest](https://xhr.spec.whatwg.org/) 使得发起异步 HTTP 请求成为可能。 - [Fetch API](https://fetch.spec.whatwg.org/) 为网络请求提供了更符合人体工程学的抽象。 - [CSS 对象模型](https://drafts.csswg.org/cssom/) 将 CSS 规则抽象成对象。 @@ -91,7 +91,7 @@ HTML 规范同时还约束了元素之间的关系，例如无序列表 {{htmlel - [Canvas 2D Context](https://html.spec.whatwg.org/multipage//#2dcontext) 是 [``](/zh-CN/docs/Web/HTML/Element/canvas) 元素的绘图 API。 - [WebAssembly 接口](https://webassembly.github.io/spec/js-api) 提供了 JavaScript 代码和 [WebAssembly](/zh-CN/docs/WebAssembly) 模块之间的通信工具。 -非浏览器环境（如 Node.js）通常不提供 DOM API——因为它们不与文档进行交互，但它们仍然会实现很多 web API，例如 {{domxref("Window.fetch", "fetch()")}} 和 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout)。 +非浏览器环境（如 Node.js）通常不提供 DOM API——因为它们不与文档进行交互，但它们仍然会实现很多 web API，例如 {{domxref("Window.fetch", "fetch()")}} 和 {{domxref("Window.setTimeout", "setTimeout()")}}。 ## 有哪些 JavaScript 的实现？ diff --git a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md index 107f79a245fa37..096f410be1d6cb 100644 --- a/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md +++ b/files/zh-cn/web/javascript/reference/functions/arrow_functions/index.md @@ -424,7 +424,7 @@ const boundAdd = add.bind(obj); console.log(boundAdd(1, 2, 3)); // 48 ``` -使用箭头函数的最大好处可能是在使用 {{domxref("setTimeout()")}} 和 {{domxref("EventTarget/addEventListener()", "EventTarget.prototype.addEventListener()")}} 等方法时，这些方法通常需要某种闭包、`call()`、`apply()` 或 `bind()`，以确保函数在适当的作用域中执行。 +使用箭头函数的最大好处可能是在使用 {{domxref("Window.setTimeout", "setTimeout()")}} 和 {{domxref("EventTarget.addEventListener()", "EventTarget.prototype.addEventListener()")}} 等方法时，这些方法通常需要某种闭包、`call()`、`apply()` 或 `bind()`，以确保函数在适当的作用域中执行。 对于传统的函数表达式，类似这样的代码并不能像预期的那样工作： diff --git a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md index 5d8a76b961a899..d6b146c8418561 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/function/bind/index.md @@ -160,7 +160,7 @@ console.log(addThirtySeven(5, 10)); // 42 ### 配合 setTimeout() -在默认情况下，在 {{domxref("setTimeout()")}} 内部，`this` 关键字将被设置为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)，在浏览器中它是 {{domxref("window")}} 对象。当处理需要将 `this` 引用类实例的类方法时，你可以显式地将 `this` 绑定到回调函数，以便保持实例的引用。 +在默认情况下，在 {{domxref("Window.setTimeout", "setTimeout()")}} 内部，`this` 关键字将被设置为 [`globalThis`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/globalThis)，在浏览器中它是 {{domxref("window")}} 对象。当处理需要将 `this` 引用类实例的类方法时，你可以显式地将 `this` 绑定到回调函数，以便保持实例的引用。 ```js class LateBloomer { diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/index.md index d61d398a14a759..affba61500c31b 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/promise/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/promise/index.md @@ -302,7 +302,7 @@ new Promise(tetheredGetNumber) ### 高级示例 -本例展示了 `Promise` 的一些机制。`testPromise()` 方法在每次点击 {{HTMLElement("button")}} 按钮时被调用，该方法会创建一个 promise 对象，使用 {{domxref("setTimeout()")}} 让 `Promise` 等待 1-3 秒不等的时间来兑现计数结果（从 1 开始的数字）。使用 `Promise` 构造函数来创建 promise。 +本例展示了 `Promise` 的一些机制。`testPromise()` 方法在每次点击 {{HTMLElement("button")}} 按钮时被调用，该方法会创建一个 promise 对象，使用 {{domxref("Window.setTimeout", "setTimeout()")}} 让 `Promise` 等待 1-3 秒不等的时间来兑现计数结果（从 1 开始的数字）。使用 `Promise` 构造函数来创建 promise。 通过使用 {{jsxref("Promise.prototype.then()","p1.then()")}} 设置兑现回调函数，并在其中记录 Promise 的兑现，这些日志显示了方法的同步代码是如何与 Promise 的异步完成是如何解耦的。 diff --git a/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md b/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md index 5f3da720812304..e34adacadbe192 100644 --- a/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md +++ b/files/zh-cn/web/javascript/reference/global_objects/promise/race/index.md @@ -34,7 +34,7 @@ Promise.race(iterable) ### 使用 Promise.race() -这个例子展示了如何使用 `Promise.race()` 来比较多个使用 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout) 实现的计时器。计时时间最短的计时器总是赢得竞态，并成为返回的 promise 状态。 +这个例子展示了如何使用 `Promise.race()` 来比较多个使用 {{domxref("Window.setTimeout", "setTimeout()")}} 实现的计时器。计时时间最短的计时器总是赢得竞态，并成为返回的 promise 状态。 ```js function sleep(time, value, state) { diff --git a/files/zh-cn/web/javascript/reference/operators/this/index.md b/files/zh-cn/web/javascript/reference/operators/this/index.md index e93a4cca75cdf2..7dd6482e8afb97 100644 --- a/files/zh-cn/web/javascript/reference/operators/this/index.md +++ b/files/zh-cn/web/javascript/reference/operators/this/index.md @@ -386,7 +386,7 @@ const fn2 = obj.getThisGetter; console.log(fn2()() === globalThis); // 在非严格模式下为 true ``` -这种行为在定义回调时非常有用。通常，每个函数表达式都创建自己的 `this` 绑定，这会遮蔽上层作用域的 `this` 值。现在，如果你不关心 `this` 值，你可以将函数定义为箭头函数，并且只在你需要的地方创建 `this` 绑定（例如，在类方法中）。参见 [`setTimeout()` 的示例](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#using_call_bind_and_apply)。 +这种行为在定义回调时非常有用。通常，每个函数表达式都创建自己的 `this` 绑定，这会遮蔽上层作用域的 `this` 值。现在，如果你不关心 `this` 值，你可以将函数定义为箭头函数，并且只在你需要的地方创建 `this` 绑定（例如，在类方法中）。参见 [`setTimeout()` 的示例](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#使用_call、bind_和_apply)。 ### getter 或 setter 中的 this diff --git a/files/zh-cn/web/javascript/reference/statements/for/index.md b/files/zh-cn/web/javascript/reference/statements/for/index.md index b903ed898a8a35..6224cc89c199c6 100644 --- a/files/zh-cn/web/javascript/reference/statements/for/index.md +++ b/files/zh-cn/web/javascript/reference/statements/for/index.md @@ -2,7 +2,7 @@ title: for slug: Web/JavaScript/Reference/Statements/for l10n: - sourceCommit: 2a71e92730e3cb0eef85991d04b10ef15531ab0c + sourceCommit: 1b4e6d1156e8471d38deeea1567c35ef412c5f42 --- {{jsSidebar("Statements")}} @@ -35,6 +35,13 @@ for (initialization; condition; afterthought) - `statement` - : 只要条件的判定结果为真就会被执行的语句。你可以使用[块语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/block)来执行多个语句。如果没有任何语句要执行，请使用一个[空语句](/zh-CN/docs/Web/JavaScript/Reference/Statements/Empty)（`;`）。 +## 描述 + +就像其他循环语句，你可以在 `statement` 中使用[控制流程语句](/zh-CN/docs/Web/JavaScript/Reference/Statements#控制流程)： + +- {{jsxref("Statements/break", "break")}} 停止 `statement` 的执行，并转到循环后的第一条语句。 +- {{jsxref("Statements/continue", "continue")}} 停止 `statement` 的执行，并重新执行 `afterthought`，然后是 `condition`。 + ## 示例 ### 使用 for @@ -139,7 +146,7 @@ for (; i < 3; i++) { } ``` -它打印了 `3`、`3` 和 `3`，因为每个 `setTimeout` 创建了一个新的闭包，它引用了 `i` 变量，但是如果 `i` 不是循环体的局部变量，那么所有的闭包都会引用同一个变量，并且由于 [`setTimeout`](/zh-CN/docs/Web/API/setTimeout) 的异步性质，它可能在循环已经退出之后才被调用，导致所有队列里的回调函数的 `i` 值都被设置为 `3`。 +它打印了 `3`、`3` 和 `3`，因为每个 `setTimeout` 创建了一个新的闭包，它引用了 `i` 变量，但是如果 `i` 不是循环体的局部变量，那么所有的闭包都会引用同一个变量，并且由于 {{domxref("Window.setTimeout", "setTimeout()")}} 的异步性质，它可能在循环已经退出之后才被调用，导致所有队列里的回调函数的 `i` 值都被设置为 `3`。 如果你使用 `var` 语句来初始化，那么变量声明将只作用于函数作用域，而不是词法作用域（即它不会局限于循环体）。 diff --git a/files/zh-cn/web/javascript/reference/strict_mode/index.md b/files/zh-cn/web/javascript/reference/strict_mode/index.md index 0e334ed1f0e652..c7ed154f7248c3 100644 --- a/files/zh-cn/web/javascript/reference/strict_mode/index.md +++ b/files/zh-cn/web/javascript/reference/strict_mode/index.md @@ -18,7 +18,7 @@ slug: Web/JavaScript/Reference/Strict_mode ## 调用严格模式 -严格模式可以应用到整个脚本或个别函数中。不要在封闭大括弧 `{}` 内这样做，在这样的上下文中这么做是没有效果的。在 `eval` 、`Function` 、内联事件处理属性、 {{domxref("WindowTimers.setTimeout()")}} 方法中传入的脚本字符串，其行为类似于开启了严格模式的一个单独脚本，它们会如预期一样工作。 +严格模式可以应用到整个脚本或个别函数中。不要在封闭大括弧 `{}` 内这样做，在这样的上下文中这么做是没有效果的。在 `eval` 、`Function`、[事件处理器](/zh-CN/docs/Web/HTML/Attributes#事件处理器属性)属性、{{domxref("Window.setTimeout", "setTimeout()")}} 方法中传入的脚本字符串，其行为类似于开启了严格模式的一个单独脚本，它们会如预期一样工作。 ### 为脚本开启严格模式 diff --git a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md index 2440e1d3032f39..8092a70757f44a 100644 --- a/files/zh-cn/web/performance/css_javascript_animation_performance/index.md +++ b/files/zh-cn/web/performance/css_javascript_animation_performance/index.md @@ -18,7 +18,7 @@ CSS 中的 transition 和 animation 都可以用于编写动画，它们都有 ## requestAnimationFrame -{{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} 提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的 {{domxref("setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。 +{{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的 {{domxref("Window.setTimeout", "setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。 > [!NOTE] > 像 CSS transitions 和 animations 一样，当页面在后台运行时，`requestAnimationFrame()` 会暂停。