计时器

JavaScript计时器让您能够在指定时间执行代码，或以固定间隔重复执行。主要有两种计时器：setTimeout() 和 setInterval()。两者都用于安排代码在延迟后运行，但行为有所不同。

1. setTimeout()

setTimeout() 在指定的延迟后仅执行一次函数或代码块。

• 工作原理: 告诉JavaScript“等待一段时间后，再执行这段代码”。

• 语法:

setTimeout(function, delay, ...args);

• 示例:

function sayHello() {
  console.log("Hello, world!");
}

// 3秒后调用 sayHello() (3000毫秒)
setTimeout(sayHello, 3000);

在这个例子中，sayHello 函数会在3秒后执行。setTimeout() 接受两个参数：

• 要执行的函数 (sayHello)。

• 延迟时间，单位为毫秒 (3000毫秒 = 3秒)。

• ...args (可选): 传递给函数的其他参数。

• 要点:

• 非阻塞: setTimeout() 不会阻塞其他代码的执行。JavaScript在等待超时期间继续执行其他语句。

• 毫秒: 延迟以毫秒为单位，最小延迟为1毫秒。

• 单次执行: 回调函数只会在指定时间后调用一次。

2. setInterval()

setInterval() 以指定的间隔（毫秒）重复执行代码块或函数，直到手动停止。

• 工作原理: 告诉JavaScript“每隔一段时间就执行这段代码”。

• 语法: (语法与setTimeout类似，只是功能不同)

• 示例:

function sayHelloAgain() {
  console.log("Hello again!");
}

// 每2秒调用 sayHelloAgain() (2000毫秒)
setInterval(sayHelloAgain, 2000);

这里，setInterval() 内部的代码会每2秒执行一次。

• 要点:

• 非阻塞: 类似于 setTimeout()，setInterval() 也是非阻塞的。浏览器在等待下一个间隔时继续执行其他任务。

• 重复执行: 与只执行一次的 setTimeout() 不同，setInterval() 会以指定间隔持续执行回调函数。

• 手动停止: 该函数会持续运行，直到使用 clearInterval() 手动停止。

3. 清除计时器

您可以使用 clearTimeout() 和 clearInterval() 来停止计时器。

• 停止 setTimeout() 计时器:

如果想在执行前取消超时，可以使用 clearTimeout()：

function sayHello() {
  console.log("Hello, world!");
}
const timeoutId = setTimeout(sayHello, 4000);

// 在执行前停止超时
clearTimeout(timeoutId);

• 停止 setInterval() 计时器:

const intervalId = setInterval(sayHello, 1000);

// 5秒后停止间隔
setTimeout(() => {
  clearInterval(intervalId);
  console.log("Interval timer stopped");
}, 5000);

这里，我们首先启动一个每秒执行的间隔。然后，5秒后，我们使用 setTimeout() 和 clearInterval(intervalId) 来停止间隔。

关键概念总结:

• setTimeout()：在指定的延迟后执行一次函数。
• setInterval()：以指定的间隔重复执行函数。
• clearTimeout() / clearInterval()：用于取消计时器。
• 异步特性: 计时器不会阻塞其他代码的执行；它们会被添加到事件队列中，并在调用堆栈为空时执行。
• 精度: 由于繁重的计算或浏览器限制等因素，计时器的精度无法保证。

以上就是计时器的详细内容，更多请关注php中文网其它相关文章！