JavaScript 定时器 setTimeout() 和 setInterval() – JavaScript 完全手册(2018版)

10年服务1亿前端开发工程师

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

注:本文为 《 JavaScript 完全手册(2018版) 》第28节,你可以查看该手册的完整目录。

编写 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)

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

setTimeoutsetInterval 在 Node.js 中的 Timers 模块里可用。

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


如果你觉得本文对你有帮助,那就请分享给更多的朋友
关注「前端干货精选」加星星,每天都能获取前端干货
赞(0) 打赏
未经允许不得转载:WEB前端开发 » JavaScript 定时器 setTimeout() 和 setInterval() – JavaScript 完全手册(2018版)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏