JS-定时器与延时器

定时器

setInterval

• 用于重复执行一个函数或代码片段，每次调用之间都有一个固定的时间延迟。它
• 参数：
  1. 回调函数，该函数会每隔一段时间被调用一次
  2. 每次调用间隔的时间，单位是毫秒
• 返回值：
  • 返回一个 Number 类型的数据，这个数字用来作为定时器的唯一标识
• 当调用 setInterval 时，它会在初始延迟后安排执行指定的函数的第一次执行。随后的执行将根据指定的延迟重复发生。(所以如果要从0毫秒开始执行，要提前调用指定函数)
• 需要注意的是 setInterval 不是完全精确的。
• 可以接受无限数量的参数

clearInterval

• 取消先前通过调用 setInterval 建立的定时重复操作
• 参数：setInterval 返回的间隔 ID

适用场景

• 编辑应用中的自动保存
• 动画和幻灯片播放定时
• 基于时间的提醒
• 间隔取消

使用示例

function cancellable(fn: Function, args: any[], t: number): Function {
    fn(...args); // 从0开始执行
    const timer = setInterval(() => fn(...args), t); // 从t开始执行

    const cancelFn = () => clearInterval(timer);
    return cancelFn;
}

延时器

setTimeout

• 允许在指定的延迟之后安排一个函数的执行
• 接受无限数量的参数，但通常前两个参数总是要执行的函数和以毫秒为单位的延迟时间。

clearTimeout

• 取消先前通过调用 setTimeout 建立的延时操作
• 参数：setTimeout 返回的间隔 ID

工作原理

• 当调用 setTimeout 时，它启动一个计时器，并设置它在指定的延迟后运行
• 在延迟到期后，JavaScript事件循环将指定的函数放入执行队列。
• 一旦调用堆栈为空，函数就会被执行，其中的任何相关代码都会运行。
• 如果在延迟到期之前取消了 setTimeout 函数，计划的函数将不会被执行。

使用示例

function delayedFunction() {
  console.log("延迟函数执行！");
}

const delay = 2000;

const timerId = setTimeout(delayedFunction, delay);

// 在延迟到期之前取消执行：
clearTimeout(timerId);

延时器和定时器的区别

• 定时调用会执行多次，而延时调用只会执行一次