JavaScript 中的计时器

1. 在 JavaScript 中使用 setTimeout() 创建一个计时器
2. 在 JavaScript 中使用 setInterval() 创建一个计时器

JavaScript 提供了两个定时器函数来执行非阻塞代码。JavaScript 提供了函数 setTimeout() 和 setInterval()，它们在特定时间间隔后执行指定的表达式或函数。

在今天的帖子中，我们将了解有关 JavaScript 计时器的更多信息。

在 JavaScript 中使用 setTimeout() 创建一个计时器

这是 JavaScript 提供的异步函数，它在计时器到期后执行特定的函数或代码段。各种原因会导致超时延迟，例如嵌套超时、非活动标签页中的超时、跟踪脚本的限制以及页面加载期间的超时延迟。

JavaScript 中 setTimeout() 的语法

setTimeout(function [, delay, arg1, arg2, ...]);
setTimeout(code[, delay]);

参数

• function：这是一个强制性参数。它指定应该在时间过去后执行的函数。
• code：这是一个强制性参数。如果用户没有传递函数，用户可以传递一个字符串，作为函数的替代。
• 延迟：这是一个可选参数。在执行指定的代码或函数之前，此参数接受数值作为计时器（以毫秒为单位）。如果没有传递任何值，则默认值为 0，这会导致立即执行。
• arg1, ..., argN：这是一个可选参数。如果传递函数，则可以将函数的值作为附加参数传递。

返回值

这个 setTimeout() 方法返回一个正的 timeoutID，它有助于识别计时器。该值可用于 clearTimeout()。

示例代码：

<button onclick="setTimeoutFunction()">Try set Timeout</button>

function addFn(a, b) {
  console.log(a + b);
  return a + b;
}

function setTimeoutFunction() {
  setTimeout(addFn, 5000, 5, 10);
}

输出：

15

在 JavaScript 中使用 setInterval() 创建一个计时器

setInterval() 方法由 JavaScript 提供。该方法在 worker 和 window 界面上提供。它重复调用一个函数或执行一段代码。此代码在每次调用之间的固定时间延迟内执行。

setInterval() 和 setTimeout() 函数之间的唯一区别是 setInterval() 重复调用函数，每次调用之间都有延迟，而 setTimeout() 在延迟后执行函数。

JavaScript 中 setTimeout() 的语法

setInterval(function [, delay, arg1, arg2, ...]);

参数

• function：这是一个强制性参数。它指定应该在时间过去后执行的函数。
• code：这是一个强制性参数。如果用户没有传递函数，用户可以传递一个字符串替代函数。
• 延迟：这是一个可选参数。此参数接受在执行指定的代码或函数之前用作计时器的数值（以毫秒为单位）。如果没有传递任何值，0 是默认值，这会导致立即执行。
• arg1, ..., argN：这是一个可选参数。如果传递函数，则可以将函数的值作为附加参数传递。

返回值

这个 setInterval() 方法返回一个正的 intervalID，它有助于识别计时器。该值可用于 clearInterval()。

示例代码：

<button onclick="setIntervalFunction()">Try set Interval</button>

function addFn(a, b) {
  console.log(a + b);
  return a + b;
}

function setIntervalFunction() {
  setInterval(addFn, 5000, 5, 10);
}

输出：

15