发现JavaScript计时器

编写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,将其传递给它的时间间隔IDsetInterval回来:

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

clearInterval(id)

打电话是很普遍的clearInterval在setInterval回调函数中,使其自动确定是否应再次运行或停止。例如,除非App.somethingIWait具有值,否则此代码将运行某些内容arrived

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

递归setTimeout

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

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

setInterval working fine

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

setInterval varying duration

也许长时间执行会与下一次执行重叠:

setInterval overlapping

为了避免这种情况,您可以安排在回调函数完成时调用递归setTimeout:

const myFunction = () => {
  // do something

  setTimeout(myFunction, 1000)
}

setTimeout( myFunction() }, 1000)

要实现这种情况:

Recursive setTimeout

setTimeoutsetInterval可在Node.js,通过计时器模块

Node.js还提供setImmediate(),相当于使用setTimeout(() => {}, 0),主要用于与Node.js事件循环配合使用。

免费下载我的JavaScript初学者手册


更多js教程: