setTimeout() setInterval() 递归的 setTimeout
当编写 JavaScript 代码时,可能希望延迟函数的执行。
这就是 setTimeout 的工作。 指定一个回调函数以供稍后执行,并指定希望它稍后运行的时间(以毫秒为单位)的值:
JS
setTimeout(() => {
// 2 秒之后运行
}, 2000)
setTimeout(() => {
// 50 毫秒之后运行
}, 50)
该语法定义了一个新的函数。 可以在其中调用所需的任何其他函数,也可以传入现有的函数名称和一组参数:
JS
const myFunction = (firstParam, secondParam) => {
// 做些事情
}
// 2 秒之后运行
setTimeout(myFunction, 2000, firstParam, secondParam)
setTimeout 会返回定时器的 id。 通常不使用它,但是可以保存此 id,并在要删除此安排的函数执行时清除它:
JS
const id = setTimeout(() => {
// 应该在 2 秒之后运行
}, 2000)
// 改变主意了
clearTimeout(id)
如果将超时延迟指定为 0,则回调函数会被尽快执行(但是是在当前函数执行之后):
JS
setTimeout(() => {
console.log('后者 ')
}, 0)
console.log(' 前者 ')
会打印 前者 后者。
通过在调度程序中排队函数,可以避免在执行繁重的任务时阻塞 CPU,并在执行繁重的计算时执行其他函数。
某些浏览器(IE 和 Edge)实现的 setImmediate() 方法具有相同的确切功能,但是不是标准的,并且在其他浏览器上不可用。但是在 Node.js 中它是标准的函数。
setInterval 是一个类似于 setTimeout 的函数,不同之处在于:它会在指定的特定时间间隔(以毫秒为单位)一直地运行回调函数,而不是只运行一次:
JS
setInterval(() => {
// 每 2 秒运行一次
}, 2000)
上面的函数每隔 2 秒运行一次,除非使用 clearInterval 告诉它停止(传入 setInterval 返回的间隔定时器 id):
JS
const id = setInterval(() => {
// 每 2 秒运行一次
}, 2000)
clearInterval(id)
通常在 setInterval 回调函数中调用 clearInterval,以使其自行判断是否应该再次运行或停止。 例如,此代码会运行某些事情,除非 App.somethingIWait 具有值 arrived:
JS
const interval = setInterval(() => {
if (App.somethingIWait === 'arrived') {
clearInterval(interval)
return
}
// 否则做些事情
}, 100)
setInterval 每 n 毫秒启动一个函数,而无需考虑函数何时完成执行。
如果一个函数总是花费相同的时间,那就没问题了:
setInterval 工作正常
函数可能需要不同的执行时间,这具体取决于网络条件,例如:
setInterval 不同的时长
也许一个较长时间的执行会与下一次执行重叠:
为了避免这种情况,可以在回调函数完成时安排要被调用的递归的 setTimeout:
JS
const myFunction = () => {
// 做些事情
setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)
实现此方案:
setTimeout 和 setInterval 可通过定时器模块在 Node.js 中使用。
Node.js 还提供 setImmediate()(相当于使用 setTimeout(() => {}, 0)),通常用于与 Node.js 事件循环配合使用。