怎么封装一个能延时 随机时间 的永久定时器?

732 阅读1分钟

定时器基本知识点

永久定时器

语法 : setInterval(function () {代码}, 间隔时间)

作用: 开启一个永久定时器

返回值: 定时器的ID(用变量接收,用于后面关闭定时器)

let timeID = setInterval(function () {
      console.log('ok')
    }, 2000)

一次性定时器

语法 : setTimeout(function () {代码}, 延时时间)

作用: 开启一个 一次性 定时器

返回值: 定时器的ID(用变量接收,用于后面关闭定时器) 在延时时间里关闭定时器才有效

 let timeID2 = setTimeout(function () {
      alert('OKkkkkk')
    }, 3000)

闲来无事,脑子一抽,想用定时器实现每隔一段时间执行一段代码,但是,要求每次延时的时间都是随机的

说干就干,这不简单

 setInterval(function () {
    let time = parseInt(500 + Math.random() * 2000)
    setTimeout(function () {
      console.log('延时执行的代码',time)
    }, time)
  }, 0) 

感觉没问题,外层定时器,用来,自动刷新time的随机值,再把值传给,里面的延时器,浏览器一打开,什么鬼,根本没效果,会一直打印,看来,里面的定时器没执行完,是不能进行下一次开启的,那就用节流思想,应该就可以

改进:

function randomTime() {
    // 定义一个节流阀
    let flag = true
    
    setInterval(function () {
     // 当阀门关闭(flag = false)时,就不执行下面代码
      if (!flag) {
        return
      }
      // 随机时间
      let time = parseInt(500 + Math.random() * 2000)
      // 函数一执行就把阀门关闭,只有里面定时器执行完毕后,才把阀门打开,达到节流 效果,
      在单位时间里,多次触发只触发第一次
      flag = false
      setTimeout(function () {
        //要随机延时的代码
        console.log('延时执行的代码',time)
        flag = true
      }, time)
    }, 0)
  }
  randomTime()

控制台,看下效果: image.png 每次延时时间都是随机的,大工告成!