Question

编写 JavaScript 代码时，您可能希望延迟某个函数的执行。我们将讨论如何使用 setTimeout 和 setInterval 来安排将来的函数。

setTimeout()

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

这是 setTimeout 的工作。您可以指定一个稍后要执行的回调函数，以及一个表示您希望它延迟执行的时间值，以毫秒为单位：

setTimeout(() => {
  // runs after 2 seconds
}, 2000)

setTimeout(() => {
  // runs after 50 milliseconds
}, 50)

此语法定义了一个新函数。您可以在其内部调用任何您想要的其他函数，或者您可以传递现有的函数名称和一组参数：

const myFunction = (firstParam, secondParam) => {
  // do something
}

// runs after 2 seconds
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout 返回一个定时器 id。通常不会用到它，但是你可以保存这个 id，在需要删除这个定时函数时可以保清空它：

const id = setTimeout(() => {
  // should run after 2 seconds
}, 2000)

// I changed my mind
clearTimeout(id)

零延时

如果将定时器延迟时间设置为 0 ，则将尽快执行回调函数，但在当前函数执行后：

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

console.log(' before ')

上面的代码将打印 before after 。

通过对调度程序中的函数进行排序，这对于避免在密集型任务上阻塞 CPU 并在执行繁重计算时让其他函数执行特别有用。

某些浏览器（ IE 和 Edge ）实现了一个 setImmediate() 方法，该方法执行相同的功能，但它不是标准的，并且 在其他浏览器上不可用 。 但它是 Node.js 中的标准函数。

setInterval()

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

setInterval(() => {
  // runs every 2 seconds
}, 2000)

上面的函数每 2 秒运行一次，除非你使用 clearInterval 停止它，传递 setInterval 返回的 id：

const id = setInterval(() => {
  // runs every 2 seconds
}, 2000)

clearInterval(id)

在 setInterval 回调函数中调用 clearInterval 是很常见的，让它自己确定它是应该再次运行还是停止。例如，除非 App.somethingIWait 的值等于 arrived ，否则此代码会继续运行：

const interval = setInterval(() => {
  if (App.somethingIWait === 'arrived') {
    clearInterval(interval)
    return
  }
  // otherwise do things
}, 100)

递归 setTimeout

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

如果一个函数总是花费相同的时间，那关系不大：

也许该函数需要不同的执行时间，特别常见的例子，比如 AJAX 请求，具体取决于网络条件，例如：

甚至有可能某个执行时间长的函数与下一个开始执行的函数重叠：

为避免这种情况，您可以在回调函数完成时递归调用 setTimeout ：

const myFunction = () => {
  // do something
  setTimeout(myFunction, 1000)
}

setTimeout(
  myFunction()
}, 1000)

上面的代码可以实现这种情况：

setTimeout 和 setInterval 在 Node.js 中的 Timers 模块里可用。

Node.js 也提供了 setImmediate() ，和使用 setTimeout(() => {}, 0) 效果一样，主要用于 Node.js 中的事件循环。