16. 探索 JavaScript 定时器

图片来源网络，侵删

setTimeout()

当编写 JavaScript 代码时，可能希望延迟函数的执行。

这就是 setTimeout 的工作。 指定一个回调函数以供稍后执行，并指定希望它稍后运行的时间（以毫秒为单位）的值：

setTimeout(() => {
  // 2 秒之后运行
}, 2000)

setTimeout(() => {
  // 50 毫秒之后运行
}, 50)

该语法定义了一个新的函数。 可以在其中调用所需的任何其他函数，也可以传入现有的函数名称和一组参数：

const myFunction = (firstParam, secondParam) => {
  // 做些事情
}

// 2 秒之后运行
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout 会返回定时器的 id。 通常不使用它，但是可以保存此 id，并在要删除此安排的函数执行时清除它：

const id = setTimeout(() => {
  // 应该在 2 秒之后运行
}, 2000)

// 改变主意了
clearTimeout(id)

零延迟

如果将超时延迟指定为 0，则回调函数会被尽快执行（但是是在当前函数执行之后）

setTimeout(() => {
  console.log('后者 ')
}, 0)

console.log(' 前者 ')

会打印 前者 后者。
通过在调度程序中排队函数，可以避免在执行繁重的任务时阻塞 CPU，并在执行繁重的计算时执行其他函数。

setInterval()

setInterval 是一个类似于 setTimeout 的函数，不同之处在于：它会在指定的特定时间间隔（以毫秒为单位）一直地运行回调函数，而不是只运行一次：

setInterval(() => {
  // 每 2 秒运行一次
}, 2000)

上面的函数每隔 2 秒运行一次，除非使用 clearInterval 告诉它停止（传入 setInterval 返回的间隔定时器 id）：

const id = setInterval(() => {
  // 每 2 秒运行一次
}, 2000)

clearInterval(id)

通常在 setInterval 回调函数中调用 clearInterval，以使其自行判断是否应该再次运行或停止。 例如，此代码会运行某些事情，除非 App.somethingIWait 具有值 arrived：

const interval = setInterval(() => {
  if (App.somethingIWait === 'arrived') {
    clearInterval(interval)
    return
  }
  // 否则做些事情
}, 100)

递归的 setTimeout

setInterval 每 n 毫秒启动一个函数，而无需考虑函数何时完成执行。

如果一个函数总是花费相同的时间，那就没问题了：

图片来源网络，侵删

函数可能需要不同的执行时间，这具体取决于网络条件，例如：

图片来源网络，侵删

也许一个较长时间的执行会与下一次执行重叠：

图片来源网络侵删

为了避免这种情况，可以在回调函数完成时安排要被调用的递归的 setTimeout：

const myFunction = () => {
  // 做些事情
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

实现此方案：

图片来源网络

更多知识点 请关注：笔墨是小舟