diff --git a/files/zh-cn/games/anatomy/index.md b/files/zh-cn/games/anatomy/index.md index 0118810568c48e..1da1f77bf4aa57 100644 --- a/files/zh-cn/games/anatomy/index.md +++ b/files/zh-cn/games/anatomy/index.md @@ -209,7 +209,7 @@ var tNow = window.performance.now(); 一种常见的技术是以恒定的频率更新模拟，然后绘制尽可能多的（或尽可能少的）实际帧。更新方法可以继续循环，而不用考虑用户看到的内容。绘图方法可以查看最后的更新以及发生的时间。由于绘制知道何时表示，以及上次更新的模拟时间，它可以预测为用户绘制一个合理的框架。这是否比官方更新循环更频繁（甚至更不频繁）无关紧要。更新方法设置检查点，并且像系统允许的那样频繁地，渲染方法画出周围的时间。在 Web 标准中分离更新方法有很多种方法： -- 绘制 `requestAnimationFrame` 并更新 {{domxref("setInterval()")}} 或 {{domxref("setTimeout()")}}。 +- 在 `requestAnimationFrame()` 中绘制，并在 {{domxref("Window.setInterval", "setInterval()")}} 或 {{domxref("setTimeout()")}} 中更新。 - 即使在未聚焦或最小化的情况下，使用处理器时间，也可能是主线程，并且可能是传统游戏循环的工件（但是很简单）。 diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md index c449e4a25f5133..885a1614e38eb3 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.md @@ -66,10 +66,10 @@ drawLives(); ## 用 requestAnimationFrame() 优化渲染 -现在让我们处理一些与游戏机制无关，但与画面渲染相关的东西。和我们目前使用{{domxref("windowTimers.setInterval()", "setInterval()")}} 实现的固定帧率渲染相比，{{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} 能让浏览器更好地渲染画面。让我们把下面这行代码： +现在让我们处理一些与游戏机制无关，但与画面渲染相关的东西。和我们目前使用 {{domxref("Window.setInterval", "setInterval()")}} 实现的固定帧率渲染相比，{{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 能让浏览器更好地渲染画面。让我们把下面这行代码： ```js -var interval = setInterval(draw, 10); +interval = setInterval(draw, 10); ``` 替换为： diff --git a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index 3d5d87bc8ce903..4d89c0167b8c84 100644 --- a/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/zh-cn/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -9,7 +9,7 @@ slug: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball 从上一节中你已经知道如何去绘制一个球。现在让我们使它动起来。从技术上讲，我们将在画布上绘制一个球，之后让它消失，然后在一个稍微不用的位置上再绘制一个一样的球。就想电影里的每一帧动起来的感觉。 -我们需要定义一个绘图函数，每次使用一组不同的变量改变球体的位置；循环调用以保持画布上每一帧不断更新。你可以使用 JavaScript 时间函数 {{domxref("WindowTimers.setInterval()", "setInterval()")}} 或者 {{domxref("window.requestAnimationFrame()")}}。 +我们需要定义一个绘图函数，每次使用一组不同的变量改变球体的位置；循环调用以保持画布上每一帧不断更新。你可以使用 JavaScript 时间函数 {{domxref("Window.setInterval", "setInterval()")}} 或者 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}}。 在你的 HTML 文件只保留前两行，删除其他所有的 JavaScript 代码并在 draw() 函数中添加以下内容保证每 10 毫秒执行一次 draw() 函数： diff --git a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md index 2c62835d8b10a6..3aeb247028a917 100644 --- a/files/zh-cn/learn/accessibility/wai-aria_basics/index.md +++ b/files/zh-cn/learn/accessibility/wai-aria_basics/index.md @@ -7,7 +7,7 @@ slug: Learn/Accessibility/WAI-ARIA_basics 紧接上文继续，有时候，我们制作涉及非语义 HTML 和动态的 JavaScript 内容更新的复杂 UI 控件可能很困难。**WAI-ARIA** 是一项技术，它可以通过浏览器和一些辅助技术来帮助我们进一步地识别以及实现语义化，这样一来能帮助我们解决问题，也让用户可以了解发生了什么。接下来我们将展示如何运用它来优化无障碍体验： - +
@@ -36,7 +36,7 @@ slug: Learn/Accessibility/WAI-ARIA_basics 当 Web 应用开始变得越来越复杂和动态化，一堆全新的无障碍访问问题和特性接踵而至。 -例如，HTML5 提出了几种语义化标签用于定义常规页面的特性 (例如 nav, footer 等等) 。在这些标签可用之前，我们一般简单地用 div 带上 ID 抑或是 class 来解决问题，例如：`
`。但是这种实践是问题丛生的，因为没有简单的方法可以轻松地用可编程的方法找到特定页面功能，例如主导航。 +例如，HTML5 提出了几种语义化标签用于定义常规页面的特性（例如 nav、footer 等等）。在这些标签可用之前，我们一般简单地用 div 带上 ID 抑或是 class 来解决问题，例如：`
`。但是这种实践是问题丛生的，因为没有简单的方法可以轻松地用可编程的方法找到特定页面功能，例如主导航。 最早的解决方案是加一个或者多个隐藏的链接来跳转到我们想要的位置，例如（这里用导航举例）： @@ -214,20 +214,20 @@ WAI-ARIA 给浏览器增加了 [`role`](https://www.w3.org/TR/wai-aria-1.1/#role ``` -我们的 JavaScript 从 [`XMLHttpRequest`](/zh-CN/docs/Web/API/XMLHttpRequest) 加载一个 JSON 文件里头包含了一系列的名人名言，一旦完成我们就开始用一个 [`setInterval()`](/zh-CN/docs/Web/API/WindowTimers/setInterval) 循环以十秒一次的频率显示出来。 +我们的 JavaScript 使用 {{domxref("Window.fetch", "fetch()")}} API 加载一个 JSON 文件（里头包含了一系列的名人名言），一旦完成我们就开始用一个 {{domxref("Window.setInterval", "setInterval()")}} 循环以十秒一次的频率显示出来。 ```js -var intervalID = window.setInterval(showQuote, 10000); +const intervalID = setInterval(showQuote, 10000); ``` 这当然是可行的，但是对于无障碍可不友善——这种内容变化是不会被屏幕阅读器察觉到的，所以用户不会发现发生了什么。这是一个简单的例子，但你可以想象一下：如果你开发的一个复杂 UI 而且内容频繁变化的应用，例如聊天室，或者一个策略游戏的界面，或者一个实时更新的购物车展示。如果没有某种方式提示用户有内容更新，那就不可能以任何有效的方式来使用应用。 幸运的是，WAI-ARIA 提供了一种有效的机制来发起提示——[`aria-live`](https://www.w3.org/TR/wai-aria-1.1/#aria-live)。将此应用于元素会让屏幕阅读器读出更新的内容。读取内容的紧急程度取决于属性值： -- `off`: 默认值，更新不会提醒。 -- `polite`: 只有用户空闲的情况下提醒。 -- `assertive`: 尽快提醒。 -- `rude`: 会以打断用户操作的方式直接提醒。 +- `off`：默认值，更新不会提醒。 +- `polite`：只有用户空闲的情况下提醒。 +- `assertive`：尽快提醒。 +- `rude`：会以打断用户操作的方式直接提醒。 通常来说 `assertive` 设置足以让你的更新在显示时按时序读出，因此，如果改变多次，那么他只会念出最后一个改变。除非紧急程度高到需要覆盖其他的更新才选择使用 `rude` 。 @@ -333,7 +333,7 @@ var intervalID = window.setInterval(showQuote, 10000); ```js function toggleMusician(bool) { - var instruItem = formItems[formItems.length - 1]; + const instruItem = formItems[formItems.length - 1]; if (bool) { instruItem.input.disabled = false; instruItem.label.style.color = "#000"; diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md index 5f5285c0c971d2..51792b33468f66 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md +++ b/files/zh-cn/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -349,7 +349,7 @@ button:before { 1. 我们清除在快进功能上设置的所有类和时间间隔。这样做是因为如果我们在按下 `fwd`（快进）按钮后再按下 `rwd`（快退）按钮，就可以取消任何快进的功能并将其替换为快退功能。如果我们试图同时做到这两点，播放器就会暂停。 2. 使用 `if` 语句检查是否已在 `rwd` 按钮上设置了用来指示它已被按下的 `active` 类。{{domxref("classList")}} 是一个存在于每个元素上的非常方便的属性。它包含元素上设置的所有类的列表，以及添加/删除类的方法等。使用 `classList.contains()` 方法检查列表是否包含 `active` 类，将返回布尔值 `true`/`false` 结果。 3. 如果在 `rwd` 按钮上设置了 `active`，我们将使用 `classList.remove()` 删除它，清除第一次按下按钮时设置的时间间隔（参见下面的更多解释），并调用 {{domxref("HTMLMediaElement.play()")}} 取消快退并开始正常播放视频。 - 4. 如果尚未设置，使用 `classList.add()` 将 `active` 类添加到 `rwd` 按钮，调用 {{domxref("HTMLMediaElement.pause()")}} 暂停视频，然后设置 `intervalRwd` 变量为 {{domxref("setInterval()")}} 的调用结果。调用时，`setInterval()` 会创建一个时间间隔。这意味着它每隔 x 毫秒运行一个作为第一个参数给出的函数，其中 x 是第二个参数的值。所以这里我们每 200 毫秒运行一次 `windBackward()` 函数——我们将使用此函数不断快退视频。要停止 {{domxref("setInterval()")}} 运行，你必须调用 {{domxref("clearInterval()")}}，并给出要清除的时间间隔的标识名，在本例中是变量名称 `intervalRwd`（请参阅函数中较早的一个 `clearInterval()` 调用）。 + 4. 如果尚未设置，使用 `classList.add()` 将 `active` 类添加到 `rwd` 按钮，调用 {{domxref("HTMLMediaElement.pause()")}} 暂停视频，然后设置 `intervalRwd` 变量为 {{domxref("Window.setInterval", "setInterval()")}} 的调用结果。调用时，`setInterval()` 会创建一个时间间隔。这意味着它每隔 x 毫秒运行一个作为第一个参数给出的函数，其中 x 是第二个参数的值。所以这里我们每 200 毫秒运行一次 `windBackward()` 函数——我们将使用此函数不断快退视频。要停止 {{domxref("Window.setInterval", "setInterval()")}} 运行，你必须调用 {{domxref("Window.clearInterval", "clearInterval()")}}，并给出要清除的时间间隔的标识名，在本例中是变量名称 `intervalRwd`（请参阅函数中较早的一个 `clearInterval()` 调用）。 3. 最后，对于本节，定义在 `setInterval()` 调用中需要调用的 `windBackward()` 和 `windForward()` 函数。在以上两个函数下面添加以下内容： diff --git a/files/zh-cn/learn/performance/javascript/index.md b/files/zh-cn/learn/performance/javascript/index.md index ac66ac02799ef9..47327bc3d9f3ac 100644 --- a/files/zh-cn/learn/performance/javascript/index.md +++ b/files/zh-cn/learn/performance/javascript/index.md @@ -239,7 +239,7 @@ async function main() { 对于关键的 DOM 动画，建议尽可能使用 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations/Using_CSS_animations)，而不是 JavaScript 动画（[Web 动画 API](/zh-CN/docs/Web/API/Web_Animations_API) 提供了一种通过 JavaScript 直接连接到 CSS 动画的方式）。直接使用浏览器执行 DOM 动画而不是使用 JavaScript 操纵内联样式表的效率更高。另请参阅 [CSS 性能优化 > 处理动画](/zh-CN/docs/Learn/Performance/CSS#处理动画)。 -对于无法在 JavaScript 中处理的动画，例如在 HTML {{htmlelement("canvas")}} 上创建动画，建议使用 {{domxref("Window.requestAnimationFrame()")}} 而不是旧的选项，例如 {{domxref("setInterval()")}}。`requestAnimationFrame()` 方法专门设计用于高效、一致地处理动画帧，以获得流畅的用户体验。基本模式如下所示： +对于无法在 JavaScript 中处理的动画，例如在 HTML {{htmlelement("canvas")}} 上创建动画，建议使用 {{domxref("Window.requestAnimationFrame()")}} 而不是旧的选项，例如 {{domxref("Window.setInterval()")}}。`requestAnimationFrame()` 方法专门设计用于高效、一致地处理动画帧，以获得流畅的用户体验。基本模式如下所示： ```js function loop() { 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 ff1d1a381ed780..b0b43cba0c5c10 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: eec174a08a5003da32f53e694c45eda3377b4d18 + sourceCommit: b795bc99fc5c5d8a96c1b202a12750404085c28a --- {{AddonSidebar}} -在未来一个特定的时间运行的计划任务代码。这很像 [`setTimeout()`](/zh-CN/docs/Web/API/WindowTimers/setTimeout) 和 [`setInterval()`](/zh-CN/docs/Web/API/WindowTimers/setInterval)，不过这些函数仅可以按需使用而不能在后台页面工作。 +在未来一个特定的时间运行的计划任务代码。这很像 [`setTimeout()`](/zh-CN/docs/Web/API/WindowTimers/setTimeout)、{{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.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 10a8953ebd8b9d..cd371430a14a9c 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,22 +600,25 @@ In page script, window.x: 1 In page script, window.y: undefined ``` -上述内容同样适用于 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout), [`setInterval()`](/zh-CN/docs/Web/API/setInterval), and [`Function()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function). +上述内容同样适用于 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout)、{{domxref("Window.setInterval", "setInterval()")}} 和 [`Function()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function)。 -当在页面的上下文中运行代码时，适用于上面所提到的"[Sharing content script objects with page scripts](/zh-CN/Add-ons/WebExtensions/Content_scripts#Sharing_objects_with_page_scripts)" 这一部分的警告：页面的环境可能会被恶意的网页所控制，这可能会导致你所交互的对象会有意想不到的行为： - -```js -// page.js redefines console.log - -var original = console.log; - -console.log = function () { - original(true); -}; -``` - -```js -// content-script.js calls the redefined version - -window.eval("console.log(false)"); -``` +> [!WARNING] +> 在页面的上下文中运行代码时要非常小心！ +> +> 页面的环境由潜在的恶意网页控制，这些网页可以重新定义与你交互的对象，使其以意想不到的方式运行： +> +> ```js example-bad +> // page.js 重新定义 console.log +> +> let original = console.log; +> +> console.log = () => { +> original(true); +> }; +> ``` +> +> ```js example-bad +> // content-script.js 调用了重新定义的版本 +> +> window.eval("console.log(false)"); +> ``` 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 83932c1ba21b6e..8cdff690f48a3b 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,16 +30,16 @@ slug: Web/API/Canvas_API/Tutorial/Basic_animations ### 有安排地更新画布 -首先，可以用{{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}},和{{domxref("window.requestAnimationFrame()")}}来设定定期执行一个指定函数。 +首先，可以用 {{domxref("Window.setInterval", "setInterval()")}}、{{domxref("window.setTimeout()")}} 和 {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} 来设定定期执行一个指定函数。 -- {{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}} +- {{domxref("Window.setInterval", "setInterval()")}} - : 当设定好间隔时间后，function 会定期执行。 -- {{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}} +- {{domxref("setTimeout()")}} - : 在设定好的时间之后执行函数 -- {{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}} +- {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} - : 告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。 -如果你并不需要与用户互动，你可以使用 setInterval() 方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上 setTimeout() 方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。 +如果你并不需要与用户互动，你可以使用 `setInterval()` 方法，它就可以定期执行指定代码。如果我们需要做一个游戏，我们可以使用键盘或者鼠标事件配合上 `setTimeout()` 方法来实现。通过设置事件监听，我们可以捕捉用户的交互，并执行相应的动作。 > [!NOTE] > 下面的例子，采用 {{domxref("window.requestAnimationFrame()")}}实现动画效果。这个方法提供了更加平缓并更加有效率的方式来执行动画，当系统准备好了重绘条件的时候，才调用绘制动画帧。一般每秒钟回调函数执行 60 次，也有可能会被降低。想要了解更多关于动画循环的信息，尤其是游戏，可以在[Game development zone](/zh-CN/docs/Games) 参考这篇文章 [Anatomy of a video game](/zh-CN/docs/Games/Anatomy)。 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 7252853cfab26e..a75f9aca37bf7e 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("WindowTimers.setInterval", "window.setInterval()")}}，或者其他任何事件处理程序来调用。 +上面的脚本中包含一个叫做 draw() 的函数，当页面加载结束的时候就会执行这个函数。通过使用在文档上加载事件来完成。只要页面加载结束，这个函数，或者像是这个的，同样可以使用 {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}、{{domxref("Window.setInterval", "setInterval()")}}，或者其他任何事件处理程序来调用。 模板看起来会是这样。如这里所示，它最初是空白的。 diff --git a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md index d1a41ce9639f20..5d572f88c1356a 100644 --- a/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/zh-cn/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -108,7 +108,7 @@ var ctx = canvas.getContext("2d", { alpha: false }); - 尽可能避免 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}特性 - 尽可能避免[text rendering](/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text) - 尝试不同的方法来清除画布 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 调整 canvas 大小) -- 有动画，请使用{{domxref("window.requestAnimationFrame()")}} 而非{{domxref("window.setInterval()")}} +- 有动画，请使用 {{domxref("Window.requestAnimationFrame()")}} 而非 {{domxref("Window.setInterval", "setInterval()")}} - 请谨慎使用大型物理库 ## 参见 diff --git a/files/zh-cn/web/api/cleartimeout/index.md b/files/zh-cn/web/api/cleartimeout/index.md index 36e78ca6ab0c16..682ddf6400e81a 100644 --- a/files/zh-cn/web/api/cleartimeout/index.md +++ b/files/zh-cn/web/api/cleartimeout/index.md @@ -9,16 +9,16 @@ slug: Web/API/clearTimeout ## 语法 -```plain -scope.clearTimeout(timeoutID) +```js-nolint +clearTimeout(timeoutID) ``` -### Parameters +### 参数 - `timeoutID` - : 你要取消定时器的标识符。该 ID 由相应的`setTimeout()`调用返回。 -值得注意的是，{{domxref("setTimeout()")}} 和 {{domxref("setInterval()")}} 使用共享的 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。 +值得注意的是，{{domxref("setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}} 共享同一个 ID 池，意味着在技术上可以混用 `clearTimeout()` 和 {{domxref("Window.clearInterval", "clearInterval()")}}。但是，为了清楚起见，你应该避免这样做。 ## 示例 @@ -67,10 +67,8 @@ window.onclick = function () { {{Compat}} -## 更多 +## 参见 -- {{domxref("WindowTimers.setTimeout()")}} -- {{domxref("WindowTimers.setInterval()")}} -- {{domxref("WindowTimers.clearInterval()")}} -- {{domxref("Window.requestAnimationFrame()")}} -- [_Daemons_ management](/zh-CN/docs/JavaScript/Timers/Daemons) +- {{domxref("setTimeout()")}} +- {{domxref("Window.clearInterval()")}} 和 {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} 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 80dae2da6338f6..1d4e1530366b77 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("setInterval()")}}）加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐发展到包含任务调度、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 `queueMicrotask()` 会非常有作用。 +自从定时器（{{domxref("setTimeout()")}} 和 {{domxref("Window.setInterval", "setInterval()")}}）加入到 Web API 后，浏览器提供的 JavaScript 环境就已经逐渐发展到包含任务调度、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 `queueMicrotask()` 会非常有作用。 ## JavaScript 执行上下文 @@ -118,7 +118,7 @@ greetUser("Veronica"); #### 任务 vs 微任务 -一个**任务**就是指计划由标准机制来执行的任何 JavaScript，如程序的初始化、事件触发的回调等。除了使用事件，你还可以使用 {{domxref("setTimeout()")}} 或者 {{domxref("setInterval()")}} 来添加任务。 +一个**任务**就是指计划由标准机制来执行的任何 JavaScript，如程序的初始化、事件触发的回调等。除了使用事件，你还可以使用 {{domxref("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 04adaff6dd73ee..9856a89c23fd9f 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 @@ -13,21 +13,21 @@ JavaScript 中的 [promise](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ 为了正确地讨论微任务，首先最好知道什么是一个 JavaScript 任务以及微任务如何区别于任务。这里是一个快速、简单的解释，但若你想了解更多细节，可以阅读这篇文章中的信息 [In depth: Microtasks and the JavaScript runtime environment](/zh-CN/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth). -### 任务（Tasks） +### 任务 -一个**任务**就是由执行诸如从头执行一段程序、执行一个事件回调或一个 interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在**任务队列**（task queue）上被调度。 +一个**任务**（task）就是由执行诸如从头执行一段程序、执行一个事件回调或一个 interval/timeout 被触发之类的标准机制而被调度的任意 JavaScript 代码。这些都在**任务队列**（task queue）上被调度。 在以下时机，任务会被添加到任务队列： - 一段新程序或子程序被直接执行时（比如从一个控制台，或在一个 {{HTMLElement("script")}} 元素中运行代码）。 - 触发了一个事件，将其回调函数添加到任务队列时。 -- 执行到一个由 {{domxref("setTimeout()")}} 或 {{domxref("setInterval()")}} 创建的 timeout 或 interval，以致相应的回调函数被添加到任务队列时。 +- 执行到一个由 {{domxref("setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 创建的 timeout 或 interval，以致相应的回调函数被添加到任务队列时。 事件循环驱动你的代码按照这些任务排队的顺序，一个接一个地处理它们。在事件循环的单次迭代中，将执行任务队列中最旧的可运行任务。之后，微任务将被执行，直到微任务队列为空，然后浏览器可以选择更新渲染。然后浏览器继续进行事件循环的下一次迭代。 -### 微任务（Microtasks） +### 微任务 -起初微任务和任务之间的差异看起来不大。它们很相似；都由位于某个队列的 JavaScript 代码组成并在合适的时候运行。但是，只有在迭代开始时队列中存在的任务才会被事件循环一个接一个地运行，这和处理微任务队列是殊为不同的。 +起初微任务（microtask）和任务之间的差异看起来不大。它们很相似；都由位于某个队列的 JavaScript 代码组成并在合适的时候运行。但是，只有在迭代开始时队列中存在的任务才会被事件循环一个接一个地运行，这和处理微任务队列是殊为不同的。 有两点关键的区别。 diff --git a/files/zh-cn/web/api/settimeout/index.md b/files/zh-cn/web/api/settimeout/index.md index 53526cbf25c023..56b02f04303c68 100644 --- a/files/zh-cn/web/api/settimeout/index.md +++ b/files/zh-cn/web/api/settimeout/index.md @@ -48,7 +48,7 @@ setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN) 使用 {{domxref("clearTimeout()")}} 取消超时。 -如果要重复调用某个函数（如每 _N_ 毫秒调用一次），考虑使用 {{domxref("setInterval()")}}。 +如果要重复调用某个函数（如每 _N_ 毫秒调用一次），考虑使用 {{domxref("Window.setInterval", "setInterval()")}}。 ### 非数字延迟值被静默地强制转化为数字 @@ -383,8 +383,7 @@ function clearMessage() { ## 参见 - [`core-js` 中允许向回调函数传递参数的 `setTimeout` 版本的 polyfill](https://github.com/zloirock/core-js#settimeout-and-setinterval) -- {{domxref("clearTimeout")}} -- {{domxref("setInterval()")}} -- {{domxref("Window.requestAnimationFrame")}} -- {{domxref("Window.queueMicrotask()")}} -- {{domxref("WorkerGlobalScope.queueMicrotask()")}} +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} +- {{domxref("Window.queueMicrotask()")}} 和 {{domxref("WorkerGlobalScope.queueMicrotask()")}} diff --git a/files/zh-cn/web/api/streams_api/using_readable_streams/index.md b/files/zh-cn/web/api/streams_api/using_readable_streams/index.md index 6a6f1d487eaa1e..1257a5e512f990 100644 --- a/files/zh-cn/web/api/streams_api/using_readable_streams/index.md +++ b/files/zh-cn/web/api/streams_api/using_readable_streams/index.md @@ -233,7 +233,7 @@ readableStream > [!NOTE] > 为了使用 {{domxref("FetchEvent.respondWith()")}} 消费流，排入的流内容的类型必须是 {{jsxref("Uint8Array")}}；例如使用 {{domxref("TextEncoder")}} 进行编码。 -自定义流的构造函数有一个 `start()` 方法，该方法使用 {{domxref("setInterval()")}} 去指定每秒生成一个随机的字符串。然后使用 {{domxref("ReadableStreamDefaultController.enqueue()")}} 将它排入流。当按下按钮，取消 interval，并调用名为 `readStream()` 函数再次将数据从流中读取回来。由于我们一直停止排入分块，所以我们也要关闭流。 +自定义流的构造函数有一个 `start()` 方法，该方法使用 {{domxref("Window.setInterval", "setInterval()")}} 去指定每秒生成一个随机的字符串。然后使用 {{domxref("ReadableStreamDefaultController.enqueue()")}} 将它排入流。当按下按钮，取消 interval，并调用名为 `readStream()` 函数再次将数据从流中读取回来。由于我们一直停止排入分块，所以我们也要关闭流。 ```js const stream = new ReadableStream({ 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 ae18d47456d88b..715d862ff4255c 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 @@ -19,14 +19,14 @@ slug: Web/API/Web_Workers_API/Functions_and_classes_available_to_workers - {{domxref("WorkerGlobalScope.atob()", "atob()")}} - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("clearInterval()")}} +- {{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("setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} - {{domxref("setTimeout()")}} - {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} - {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker） 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 b681130fb8f65a..00bc080338ff5d 100644 --- a/files/zh-cn/web/api/web_workers_api/index.md +++ b/files/zh-cn/web/api/web_workers_api/index.md @@ -40,14 +40,14 @@ worker 在一个与当前 {{DOMxRef("window")}} 不同的全局上下文中运 - {{domxref("WorkerGlobalScope.atob()", "atob()")}} - {{domxref("WorkerGlobalScope.btoa()", "btoa()")}} -- {{domxref("clearInterval()")}} +- {{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("setInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} - {{domxref("setTimeout()")}} - {{DOMxRef("WorkerGlobalScope.structuredClone", "structuredClone()")}} - {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()", "requestAnimationFrame()")}}（仅专用 worker） 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 d6e8c4f7bfaee6..392b1f145c8671 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 @@ -812,14 +812,14 @@ worker 将属性 `onmessage` 设置为一个函数，当 worker 对象调用 `po 你可以在 web worker 中使用大多数的标准 JavaScript 特性，包括： - {{domxref("Navigator")}} -- {{domxref("XMLHttpRequest")}} +- {{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("setInterval()")}} +- {{domxref("setTimeout()")}} 和 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 在一个 worker 中最主要的你*不能*做的事情就是直接影响父页面。包括操作父页面的节点以及使用页面中的对象。你只能间接地实现，通过 {{domxref("DedicatedWorkerGlobalScope.postMessage")}} 回传消息给主脚本，然后从主脚本那里执行操作或变化。 > [!NOTE] -> 你可以使用网站测试一个方法是否对 worker 可用： 。例如，如果你在 Firefox 84 的网站上输入 [EventSource](/zh-CN/docs/Web/API/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)。 @@ -830,7 +830,7 @@ worker 将属性 `onmessage` 设置为一个函数，当 worker 对象调用 `po ## 相关链接 -- [`Worker`](/zh-CN/docs/Web/API/Worker) 接口 -- [`SharedWorker`](/zh-CN/docs/Web/API/SharedWorker) 接口 +- {{domxref("Worker")}} 接口 +- {{domxref("SharedWorker")}} 接口 - [worker 可用的方法](/zh-CN/docs/Web/API/Worker/Functions_and_classes_available_to_workers) -- [`OffscreenCanvas`](/zh-CN/docs/Web/API/OffscreenCanvas) 接口 +- {{domxref("OffscreenCanvas")}} 接口 diff --git a/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md b/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md index 7b789a78151071..06047e00a7f0d6 100644 --- a/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md +++ b/files/zh-cn/web/api/webgl_api/by_example/simple_color_animation/index.md @@ -13,7 +13,7 @@ slug: Web/API/WebGL_API/By_example/Simple_color_animation 本案例使用{{Glossary("WebGL")}}来实现简单的色彩动画和用户交互效果，用户可以通过按按钮来开始/暂停/重新开始动画。 -我们把 {{Glossary("WebGL")}}函数放在一个定时循环器里 (`setInterval`)。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令 (通常是逐帧动画，这次我们设置为逐秒动画) +我们把 {{Glossary("WebGL")}} 函数放在一个定时循环器里（`setInterval`）。通过监听点击事件来让用户开始/暂停动画。并通过定时器来循环执行绘制指令（通常是逐帧动画，这次我们设置为逐秒动画） ```html

一个色彩动画的简单 WebGl 程序

diff --git a/files/zh-cn/web/api/window/clearinterval/index.md b/files/zh-cn/web/api/window/clearinterval/index.md index deeb9939800a97..02aecb5fd1d84f 100644 --- a/files/zh-cn/web/api/window/clearinterval/index.md +++ b/files/zh-cn/web/api/window/clearinterval/index.md @@ -1,33 +1,34 @@ --- -title: WindowTimers.clearInterval() +title: Window：clearInterval() 方法 slug: Web/API/Window/clearInterval -original_slug: Web/API/clearInterval +l10n: + sourceCommit: 1b45c29b1aefa5e128e901fb3b8b5c10750da232 --- {{ApiRef("HTML DOM")}} -`WindowOrWorkerGlobalScope` mixin 的 **`clearInterval()`** 方法可取消先前通过 {{domxref("setInterval()")}} 设置的重复定时任务。 +{{domxref("Window")}} 接口的 **`clearInterval()`** 方法可取消先前通过调用 {{domxref("Window.setInterval", "setInterval()")}} 设置的重复定时任务。如果提供的参数未指定先前建立的操作，则此方法不执行任何动作。 ## 语法 -```plain -scope.clearInterval(intervalID) +```js-nolint +clearInterval(intervalID) ``` -### Parameters +### 参数 - `intervalID` - - : 要取消的定时器的 ID。是由 `setInterval()` 返回的。 + - : 你要取消的重复操作的标识符。这个 ID 是由对应的 `setInterval()` 调用返回的。 -值得一提的是，{{domxref("setInterval()")}} 和 {{domxref("setTimeout()")}} 共用其定义的 IDs，即可以使用 `clearInterval()` 和 {{domxref("clearTimeout()")}} 中的任意一个。然而，为了使代码可读性更强，你应该尽量避免这种用法。 +值得一提的是，{{domxref("Window.setInterval", "setInterval()")}} 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。 ### 返回值 -{{jsxref("undefined")}} +无（{{jsxref("undefined")}}）。 ## 示例 -查看 [`setInterval()` 的示例](/zh-CN/docs/DOM/window.setInterval#Example)。 +参见 {{domxref("Window.setInterval", "setInterval()")}} 以获取示例。 ## 规范 @@ -39,9 +40,7 @@ scope.clearInterval(intervalID) ## 参见 -- [JavaScript 定时器](/zh-CN/docs/JavaScript/Timers) -- {{domxref("setTimeout")}} -- {{domxref("setInterval")}} -- {{domxref("clearTimeout")}} -- {{domxref("Window.requestAnimationFrame")}} -- [_Daemons_ management](/zh-CN/docs/JavaScript/Timers/Daemons) +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/zh-cn/web/api/window/index.md b/files/zh-cn/web/api/window/index.md index 4a4573f4d8d07f..36c9736b792156 100644 --- a/files/zh-cn/web/api/window/index.md +++ b/files/zh-cn/web/api/window/index.md @@ -167,8 +167,8 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 取消之前使用 {{domxref("Window.requestIdleCallback")}} 安排的回调。 - {{domxref("Window.clearImmediate()")}} - : 取消使用 `setImmediate()` 设置的重复执行任务。 -- {{domxref("clearInterval", "Window.clearInterval()")}} - - : 取消使用 {{domxref("setInterval()")}} 设置的重复执行任务。 +- {{domxref("Window.clearInterval()")}} + - : 取消使用 {{domxref("Window.setInterval()")}} 设置的重复执行任务。 - {{domxref("clearTimeout()", "Window.clearTimeout()")}} - : 取消使用 {{domxref("setTimeout()")}} 设置的延时执行任务。 - {{domxref("Window.close()")}} @@ -233,7 +233,7 @@ _本接口从 {{domxref("EventTarget")}} 接口继承方法。_ - : 将文档滚动至特定坐标。 - {{domxref("Window.setImmediate()")}} - : 在浏览器完成其他繁重的任务后执行一个函数。 -- {{domxref("setInterval", "Window.setInterval()")}} +- {{domxref("Window.setInterval()")}} - : 安排一个函数，在给定的毫秒数过去后执行。 - {{domxref("Window.setResizable()")}} {{Non-standard_Inline}} - : 切换用户调整窗口大小的能力。 diff --git a/files/zh-cn/web/api/window/setinterval/index.md b/files/zh-cn/web/api/window/setinterval/index.md index 7b9c0740d1adad..841bd21b00b82b 100644 --- a/files/zh-cn/web/api/window/setinterval/index.md +++ b/files/zh-cn/web/api/window/setinterval/index.md @@ -1,42 +1,48 @@ --- -title: setInterval() +title: Window：setInterval() 方法 slug: Web/API/Window/setInterval -original_slug: Web/API/setInterval +l10n: + sourceCommit: 1cefd237f7e20b060020324904fec16bef3ebbec --- {{ApiRef("HTML DOM")}} -{{domxref("Window")}} 和 {{domxref("Worker")}} 接口提供的 **`setInterval()`** 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。 +{{domxref("Window")}} 接口的 **`setInterval()`** 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。 -它返回一个 `interval ID`，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 {{domxref("clearInterval", "clearInterval()")}} 来移除定时器。 +此方法返回一个间隔 ID，其唯一地标识时间间隔，因此你可以稍后通过调用 {{domxref("Window.clearInterval", "clearInterval()")}} 来移除它。 ## 语法 -```js -var intervalID = setInterval(func, [delay, arg1, arg2, ...]); -var intervalID = setInterval(function[, delay]); -var intervalID = setInterval(code, [delay]); +```js-nolint +setInterval(code) +setInterval(code, delay) + +setInterval(func) +setInterval(func, delay) +setInterval(func, delay, arg1) +setInterval(func, delay, arg1, arg2) +setInterval(func, delay, arg1, arg2, /* …, */ argN) ``` ### 参数 - `func` - - : 要重复调用的{{jsxref("function", "函数")}}，每经过指定 `delay` 毫秒后执行一次。第一次调用发生在 `delay` 毫秒之后。 + - : 要每隔 `delay` 毫秒执行一次的{{jsxref("function", "函数", "", 1)}}。第一次执行发生在 `delay` 毫秒之后。 - `code` - - : 这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每经过 `delay` 毫秒执行一次。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以*不推荐*使用。 -- `delay` - - : 是每次延迟的毫秒数（一秒等于 1000 毫秒），函数的每次调用会在该延迟之后发生。如果未指定，则其默认值为 0。参见下方的[延迟限制](#延迟限制)以了解详细的 `delay` 的取值范围。 -- `arg1, ..., argN` {{optional_inline}} - - : 当计时结束的时候，将被传递给 _func_ 函数的附加参数。 + - : 这个可选的语法让你可以传递一个字符串来代替函数，你传递的字符串会被编译然后每经过 `delay` 毫秒执行一次。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以*不推荐*使用。 +- `delay` {{optional_inline}} + - : 计时器每次执行指定的函数和代码的延迟时间（以毫秒——千分之一秒——为单位）。如果未指定，则其默认值为 0。参见下方的[延迟限制](#延迟限制)以了解详细的 `delay` 的取值范围。 +- `arg1`、……、`argN` {{optional_inline}} + - : 当计时器结束的时候，将被传递给 _func_ 函数的附加参数。 ### 返回值 -返回值 `intervalID` 是一个非零数值，用来标识通过 `setInterval()` 创建的定时器，这个值可以用来作为 {{domxref("clearInterval()")}} 的参数来清除对应的定时器。 +返回值 `intervalID` 是一个非零数值，用来标识调用 `setInterval()` 创建的定时器；这个值可以用来传递给 {{domxref("Window.clearInterval", "clearInterval()")}} 来清除定时器。 -值得注意的是，`setInterval()` 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。但是，我们应该匹配使用 `clearInterval()` 和 `clearTimeout()`，以避免代码杂乱无章，并增强代码的可维护性。 +值得注意的是，`setInterval()` 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。 > [!NOTE] -> 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒以内，因为它在 IDL 中被指定为一个有符号整数。 +> 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒（大约 24.8 天）以内，因为它在 IDL 中被指定为一个有符号整数。 ## 示例 @@ -45,11 +51,11 @@ var intervalID = setInterval(code, [delay]); 下面例子演示了 `setInterval()` 的基本语法。 ```js -var intervalID = setInterval(myCallback, 500, "Parameter 1", "Parameter 2"); +var intervalID = setInterval(myCallback, 500, "参数 1", "参数 2"); function myCallback(a, b) { - // Your code here - // Parameters are purely optional. + // 在这里编写你的代码 + // 参数完全是可选的。 console.log(a); console.log(b); } @@ -57,16 +63,16 @@ function myCallback(a, b) { ### 例 2：两种颜色的切换 -下面的例子会每隔一秒就调用一次 `flashtext()` 函数，直至你按下 Stop 按钮。 +下面的例子会每隔一秒就调用一次 `flashtext()` 函数，直至你按下停止按钮。 #### HTML ```html
-

Hello World

+

你好世界

- - + + ``` #### CSS @@ -83,11 +89,11 @@ function myCallback(a, b) { #### JavaScript ```js -// variable to store our intervalID +// 用于存储 intervalID 的变量 let nIntervId; function changeColor() { - // check if already an interval has been set up + // 检查是否已经设置了定时器 if (!nIntervId) { nIntervId = setInterval(flashText, 1000); } @@ -95,16 +101,12 @@ function changeColor() { function flashText() { const oElem = document.getElementById("my_box"); - if (oElem.className === "go") { - oElem.className = "stop"; - } else { - oElem.className = "go"; - } + oElem.className = oElem.className === "go" ? "stop" : "go"; } function stopTextColor() { clearInterval(nIntervId); - // release our intervalID from the variable + // 释放 intervalID nIntervId = null; } @@ -116,46 +118,45 @@ document.getElementById("stop").addEventListener("click", stopTextColor); {{EmbedLiveSample("例 2：两种颜色的切换")}} -参见：[`clearInterval()`](/zh-CN/docs/Web/API/clearInterval)。 - ## “this”的问题 -当你给 `setInterval()` 传递一个方法或者函数的时候，方法/函数 在被调用时会绑定错误的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 值。这个问题在 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference/Operators/this#as_an_object_method) 进行了详细解释。 +当你将一个方法传递给 `setInterval()` 或其他函数时，它在被调用时会绑定错误的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 值。这个问题在 [JavaScript 参考](/zh-CN/docs/Web/JavaScript/Reference/Operators/this#回调)进行了详细解释。 ### 解释 被 `setInterval()` 调用的代码在与调用它的函数不同的上下文中运行。因此，被调用函数的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 关键字被设置为了 `windows`（或 `global`）对象，而不是调用 `setTimeout` 时的 `this`。请看以下的示例（它使用 `setTimeout()` 代替了 `setInterval()`——但两种定时器都具有这一的问题）： ```js -myArray = ["zero", "one", "two"]; +const myArray = ["零", "一", "二"]; myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this); }; -myArray.myMethod(); // prints "zero,one,two" -myArray.myMethod(1); // prints "one" -setTimeout(myArray.myMethod, 1000); // prints "[object Window]" after 1 second -setTimeout(myArray.myMethod, 1500, "1"); // prints "undefined" after 1,5 seconds -// passing the 'this' object with .call won't work -// because this will change the value of this inside setTimeout itself -// while we want to change the value of this inside myArray.myMethod -// in fact, it will be an error because setTimeout code expects this to be the window object: -setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object" -setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error +myArray.myMethod(); // 打印“零，一，二” +myArray.myMethod(1); // 打印“一” +setTimeout(myArray.myMethod, 1000); // 在 1 秒后打印“[object Window]” +setTimeout(myArray.myMethod, 1500, "1"); // 在 1.5 秒后打印“undefined” + +// 使用 .call 传递“this”对象不起作用 +// 因为这会改变 setTimeout 自身内部的 this 值 +// 而我们想要改变的是 myArray.myMethod 内部的 this 值 +// 实际上，这会导致错误，因为 setTimeout 代码期望 this 是 window 对象： +setTimeout.call(myArray, myArray.myMethod, 2000); // 错误：“NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object” +setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 相同的错误 ``` -如你所见，`this` 在旧版 JavaScript 中无法被传递给回调函数。 +如你所见，在旧版 JavaScript 中无法将 `this` 对象传递给回调函数。 ### 一个可能的解决方案 -所有现代 JavaScript 运行时（浏览器或其他地方）都支持[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)（携带 `this` 对象）——允许我们在 `myArray` 方法内，编写 `setInterval( () => this.myMethod)` 以在回调函数中使用 `this` 指代 `myArray`。 +所有现代 JavaScript 运行时（浏览器或其他地方）都支持[箭头函数](/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)（携带词法 `this`）——允许我们在 `myArray` 方法内，编写 `setInterval(() => this.myMethod())`。 如果你需要支持 IE 浏览器，请使用 [`Function.prototype.bind()`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) 方法，它允许你指定调用给定函数时 `this` 的值。这可以让你避免因为上下文的不同而导致调用的函数的 `this` 不明确而出现的问题。 ## 使用说明 -`setInterval()` 函数通常用于为重复执行的函数设置一个时间间隔（例如：动画）。你可以使用 {{domxref("clearInterval()")}} 取消定时器。 +`setInterval()` 函数通常用于为重复执行的函数设置一个时间间隔（例如：动画）。你可以使用 {{domxref("Window.clearInterval", "clearInterval()")}} 取消定时器。 如果你希望在指定的延迟后，仅执行*一次*函数，请使用 {{domxref("setTimeout()")}}。 @@ -174,7 +175,7 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error ```js (function loop() { setTimeout(function () { - // Your logic here + // 在这里编写代码逻辑 loop(); }, delay); @@ -193,8 +194,8 @@ setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error ## 参见 -- [Polyfill of `setInterval` which allows passing arguments to the callback in `core-js`](https://github.com/zloirock/core-js#settimeout-and-setinterval) -- {{domxref("setTimeout")}} -- {{domxref("clearTimeout")}} -- {{domxref("clearInterval")}} -- {{domxref("window.requestAnimationFrame")}} +- [`core-js` 中 `setInterval` 的 polyfill，支持向回调函数传递参数](https://github.com/zloirock/core-js#settimeout-and-setinterval) +- {{domxref("setTimeout()")}} +- {{domxref("Window.clearInterval()")}} 和 {{domxref("WorkerGlobalScope.clearInterval()")}} +- {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.requestAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.requestAnimationFrame()")}} diff --git a/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md b/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md new file mode 100644 index 00000000000000..fd14de1602ddbf --- /dev/null +++ b/files/zh-cn/web/api/workerglobalscope/clearinterval/index.md @@ -0,0 +1,46 @@ +--- +title: WorkerGlobalScope：clearInterval() 方法 +slug: Web/API/WorkerGlobalScope/clearInterval +l10n: + sourceCommit: 1b45c29b1aefa5e128e901fb3b8b5c10750da232 +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +{{domxref("WorkerGlobalScope")}} 接口的 **`clearInterval()`** 方法可取消先前通过调用 {{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 设置的重复定时任务。如果提供的参数未指定先前建立的操作，则此方法不执行任何动作。 + +## 语法 + +```js-nolint +clearInterval(intervalID) +``` + +### 参数 + +- `intervalID` + - : 你要取消的重复操作的标识符。这个 ID 是由对应的 `setInterval()` 调用返回的。 + +值得一提的是，{{domxref("WorkerGlobalScope.setInterval", "setInterval()")}} 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰起见，你应该尽量避免这种用法。 + +### 返回值 + +无（{{jsxref("undefined")}}）。 + +## 示例 + +参见 {{domxref("Window.setInterval", "setInterval()")}} 以获取示例。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- {{domxref("clearTimeout()")}} +- {{domxref("Window.setInterval()")}} 和 {{domxref("WorkerGlobalScope.setInterval()")}} +- {{domxref("Window.clearInterval()")}} +- {{domxref("Window.cancelAnimationFrame()")}} 和 {{domxref("DedicatedWorkerGlobalScope.cancelAnimationFrame()")}} diff --git a/files/zh-cn/web/api/workerglobalscope/setinterval/index.md b/files/zh-cn/web/api/workerglobalscope/setinterval/index.md new file mode 100644 index 00000000000000..39ba0746cffdd8 --- /dev/null +++ b/files/zh-cn/web/api/workerglobalscope/setinterval/index.md @@ -0,0 +1,67 @@ +--- +title: WorkerGlobalScope：setInterval() 方法 +slug: Web/API/WorkerGlobalScope/setInterval +l10n: + sourceCommit: 1cefd237f7e20b060020324904fec16bef3ebbec +--- + +{{APIRef("HTML DOM")}}{{AvailableInWorkers("worker")}} + +{{domxref("WorkerGlobalScope")}} 接口的 **`setInterval()`** 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。 + +此方法返回一个间隔 ID，其唯一地标识时间间隔，因此你可以稍后通过调用 {{domxref("WorkerGlobalScope.clearInterval", "clearInterval()")}} 来移除它。 + +此方法也在窗口上下文中可用：有关 `setInterval()` 的详细描述，请参阅 {{domxref("Window.setInterval()")}} 页面。 + +## 语法 + +```js-nolint +setInterval(code) +setInterval(code, delay) + +setInterval(func) +setInterval(func, delay) +setInterval(func, delay, arg1) +setInterval(func, delay, arg1, arg2) +setInterval(func, delay, arg1, arg2, /* …, */ argN) +``` + +### 参数 + +- `func` + - : 要每隔 `delay` 毫秒执行一次的{{jsxref("function", "函数", "", 1)}}。第一次执行发生在 `delay` 毫秒之后。 +- `code` + - : 这个可选的语法让你可以传递一个字符串来代替函数，你传递的字符串会被编译然后每经过 `delay` 毫秒执行一次。这个语法因为与 {{jsxref("Global_Objects/eval", "eval()")}} 存在相同的安全风险所以*不推荐*使用。 +- `delay` {{optional_inline}} + - : 计时器每次执行指定的函数和代码的延迟时间（以毫秒——千分之一秒——为单位）。如果未指定，则其默认值为 0。参见[延迟限制](/zh-CN/docs/Web/API/Window/setInterval#延迟限制)以了解详细的 `delay` 的取值范围。 +- `arg1`、……、`argN` {{optional_inline}} + - : 当计时器结束的时候，将被传递给 _func_ 函数的附加参数。 + +### 返回值 + +返回值 `intervalID` 是一个非零数值，用来标识调用 `setInterval()` 创建的定时器；这个值可以用来传递给 {{domxref("Window.clearInterval", "clearInterval()")}} 来清除定时器。 + +值得注意的是，`setInterval()` 和 {{domxref("setTimeout()")}} 共享同一个 ID 池，并且 `clearInterval()` 和 {{domxref("clearTimeout", "clearTimeout()")}} 在技术上是可互换使用的。然而，为了清晰可见，你应该尝试始终匹配，以避免维护代码时产生混淆。 + +> [!NOTE] +> 参数 `delay` 会被转换成一个有符号 32 位整数。这将 `delay` 限制到了 2147483647 毫秒（大约 24.8 天）以内，因为它在 IDL 中被指定为一个有符号整数。 + +## 示例 + +参见 {{domxref("Window.setInterval", "setInterval()")}} 以获取示例。 + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`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()")}} 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 1153e547c4a891..4eddbad69222d6 100644 --- a/files/zh-cn/web/javascript/javascript_technologies_overview/index.md +++ b/files/zh-cn/web/javascript/javascript_technologies_overview/index.md @@ -66,7 +66,7 @@ ECMAScript 版本由每年的 ECMA 大会批准并作为标准发布。所有的 文档对象模型（DOM）是用来表达 HTML、XHTML 及 XML 文档中的对象或与其进行交互的**约定**，它是跨平台的，并且与**编程语言无关**。通过调用**DOM 树**上对象的方法可以操纵这些对象。文档对象模型核心是由 [W3C](/zh-CN/docs/Glossary/W3C) 进行标准化的，它将 HTML 和 XML 文档抽象成对象，并在其上定义接口以及操纵这些对象的机制，DOM 定义的元素有： -- [DOM 核心](https://dom.spec.whatwg.org/)中定义了文档结构、树模型，以及 DOM 事件架构，包括：[`Node`](/zh-CN/docs/Web/API/Node)、[`Element`](/zh-CN/docs/Web/API/Element)、[`DocumentFragment`](/zh-CN/docs/Web/API/DocumentFragment)、[`Document`](/zh-CN/docs/Web/API/Document)、[`DOMImplementation`](/zh-CN/docs/Web/API/DOMImplementation)、[`Event`](/zh-CN/docs/Web/API/Event)、[`EventTarget`](/zh-CN/docs/Web/API/EventTarget)，等等 +- [DOM 核心](https://dom.spec.whatwg.org/)中定义了文档结构、树模型，以及 DOM 事件架构，包括：{{domxref("Node")}}、{{domxref("Element")}}、{{domxref("DocumentFragment")}}、{{domxref("Document")}}、{{domxref("DOMImplementation")}}、{{domxref("Event")}}、{{domxref("EventTarget")}}，等等 - [DOM 事件](https://w3c.github.io/uievents/)中包括对于 DOM 事件架构的一个不太严格的定义，以及一些特殊事件。 - [DOM 元素遍历](https://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html)以及 [DOM 范围](https://dom.spec.whatwg.org/#ranges)对象等其他内容。 @@ -74,15 +74,15 @@ ECMAScript 版本由每年的 ECMA 大会批准并作为标准发布。所有的 ### HTML DOM -[HTML](https://html.spec.whatwg.org/multipage/)，Web 的标记语言，是根据 DOM 定义的。位于 DOM 核心抽象概念之上，HTML 还定义了元素的意义。比如元素的 `className` 属性以及例如 [`document.body`](/zh-CN/docs/Web/API/Document/body) 这样的 API。 +[HTML](https://html.spec.whatwg.org/multipage/)，Web 的标记语言，是根据 DOM 定义的。位于 DOM 核心抽象概念之上，HTML 还定义了元素的意义。比如元素的 `className` 属性以及例如 {{domxref("Document.body")}} 这样的 API。 -HTML 规范同时还约束了元素之间的关系，例如无序列表 [`
    `](/zh-CN/docs/Web/HTML/Element/ul) 元素中，只能以 [`
  • `](/zh-CN/docs/Web/HTML/Element/li) 元素作为子元素来表达列表项。还有就是禁止使用标准中未定义的元素和属性。 +HTML 规范同时还约束了元素之间的关系，例如无序列表 {{htmlelement("ul")}} 元素中，只能以 {{htmlelement("li")}} 元素作为子元素来表达列表项。还有就是禁止使用标准中未定义的元素和属性。 -想了解更多关于 [`Document`](/zh-CN/docs/Web/API/Document) 对象、[`Window`](/zh-CN/docs/Web/API/Window) 对象以及其他 DOM 元素的信息？请访问 MDN 的 [DOM 文档](/zh-CN/docs/Web/API/Document_Object_Model)。 +想了解更多关于 {{domxref("Document")}} 对象、{{domxref("Window")}} 对象以及其他 DOM 元素的信息？请访问 MDN 的 [DOM 文档](/zh-CN/docs/Web/API/Document_Object_Model)。 ## 其他值得关注的 API -- [`setTimeout`](/zh-CN/docs/Web/API/setTimeout) 和 [`setInterval`](/zh-CN/docs/Web/API/setInterval) 函数最早被定义在 HTML 标准的 [`Window`](/zh-CN/docs/Web/API/Window) 接口下。 +- [`setTimeout`](/zh-CN/docs/Web/API/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 规范同时还约束了元素之间的关系，例如无序列表 [`
      `] - [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，例如 [`fetch()`](/zh-CN/docs/Web/API/fetch) 和 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout)。 +非浏览器环境（如 Node.js）通常不提供 DOM API——因为它们不与文档进行交互，但它们仍然会实现很多 web API，例如 {{domxref("Window.fetch", "fetch()")}} 和 [`setTimeout()`](/zh-CN/docs/Web/API/setTimeout)。 ## 有哪些 JavaScript 的实现？ @@ -104,7 +104,7 @@ mozilla.org 上托管了两个 JavaScript 实现。**首个** JavaScript 由网 - Google 的 [V8](http://code.google.com/p/v8/)，在 Google Chrome 浏览器和较新的 Opera 浏览器中使用。这同时也是[Node.js](https://nodejs.org/en/)使用的引擎。 - [JavaScriptCore](http://www.webkit.org/projects/javascript/index.html) (SquirrelFish/Nitro)，被用在了一些 WebKit 浏览器如 Apple Safari。 - [Carakan](http://my.opera.com/ODIN/blog/carakan-faq)，用在旧版本 Opera 中。 -- [Chakra](http://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29) 引擎，用在 Internet Explorer 中（尽管它实现的语言被正式地称作为“JScript”来避免商标问题）。 +- [Chakra]() 引擎，用在 Internet Explorer 中（尽管它实现的语言被正式地称作为“JScript”来避免商标问题）。 每个 mozilla.org 的 JavaScript 引擎都提供了 公用 API 使程序开发者能将其 JavaScript 嵌入自己的软件中。目前最常见的 JavaScript 宿主环境是网页浏览器。浏览器一般通过 API 创建“宿主对象”来负责将[DOM](http://www.w3.org/DOM/) 反射到 JavaScript 中。 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 1543c23bd55ab2..2440e1d3032f39 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("setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。 +{{domxref("Window.requestAnimationFrame","requestAnimationFrame()")}} 提供了一种用 JavaScript 代码制作动画的高效方式。本方法的回调函数在绘制下一帧之前由浏览器调用。与需要一个延迟参数的 {{domxref("setTimeout()")}} 或 {{domxref("Window.setInterval", "setInterval()")}} 相比，`requestAnimationFrame()` 效率高得多。开发人员可以在 `requestAnimationFrame()` 回调函数中通过简单地改变元素的样式（或者更新画布绘制，等等）来创建动画。 > [!NOTE] > 像 CSS transitions 和 animations 一样，当页面在后台运行时，`requestAnimationFrame()` 会暂停。
前提要求：