深入了解javascript定时器

js定时器有两种

• setTimeOut(fn, time) time毫秒之后，只执行一次
• setInterval(fn, time) 重复的无限次数的执行回调，在关闭定时器之前，每隔time毫秒就执行一次，执行无数次

---

由于setTimeOut和setInterval类似，以下只拿setTimeOut或setInterval一种举例，另外一种同理。

给定时器的回调函数传递参数

• 直接调用的方法后面传递参数（不可行）

//能获取到参数，但是会立即执行一次，而不是在1s后执行，没有定时器的效果了，不可取
setTimeout(setTime('小明'), 1000)
function setTime(name) {
  console.log('定时器执行并且接收参数：', name)
}

• 简单方便的传参（可行）

此方式为nodejs官方文档中查看可知，回调函数的参数可以通过定时器的后面的参数直接传递，多个参数用“,”拼接。

node官方文档.png

setTimeout(setTime, 1000, 12, '路西')   // setTimeout(setTime, 1000, '参数1', '参数2’, ...) 
function setTime(num, name) {
  console.log('定时器执行并且接收参数：', num, name)
}

*通过闭包的方式接收参数（可行）

setTimeout(setTime('小明'), 1000)
function setTime(name) {
  return () => {
    console.log(name)
  }
}

定时器是time毫秒之后才执行回调，但是很多项目当中需要，一开始就执行一遍回调，然后之后再隔time毫秒之后再执行回调，

此方式可以用直接调用回调并且使用闭包的方式实现

setInterval(setTime(), 1000)
function setTime() {
  callbackFn()
  return callbackFn   //闭包
}
//需要执行的回调函数
function callbackFn() {
  //需要执行的代码内容
  console.log('回调函数执行了')
}

清除定时器

//定义timer定时器
const timer = setTimeout(fn, time)
//利用clearTimeout方法清除定时器，传递定时器的名字
clearTimeout(timer)

以下对应的定时器清除方法

• setTimeout(fn, time) ===> clearTimeOut(timer)
• setInterval(fn, time) ===> clearInterval(timer)
• 通常在setInterval回调函数中调用clearInterval,以使其字型判断是否应该再次执行或者停止。*