不懂就问,自定义销毁定时器的 bug

Question

代码 1 清除定时器有效

  let timerMap = {}
  let id = 0
  const _setInterval = (cb, time) => {
    id++
    const fn = () => {
      cb()
      timerMap[id] = setTimeout(fn, time)
    }
    timerMap[id] = setTimeout(fn, time)
    return id
  }
  const _clearInterval = (id) => {
    console.log(timerMap, id)
    clearTimeout(timerMap[id])
    delete timerMap[id]
  }

  let timeId1 = _setInterval(() => {
    console.log(11111)
  }, 1000)

  setTimeout(() => {
    _clearInterval(timeId1)
  }, 1500)

代码 2 清除定时器无效

  let timerMap = {}
  let id = 0
  const _setInterval = (cb, time) => {
    id++
    const fn = () => {
      cb()
      timerMap[id] = setTimeout(fn, time)
    }
    timerMap[id] = setTimeout(fn, time)
    return id
  }
  const _clearInterval = (id) => {
    console.log(timerMap, id)
    clearTimeout(timerMap[id])
    delete timerMap[id]
  }

  let timeId1 = _setInterval(() => {
    console.log(11111)
  }, 1000)
  //加了这段
  let timeId2 = _setInterval(() => {
     console.log(2222)
  }, 1000)

  setTimeout(() => {
    _clearInterval(timeId1)
  }, 1500)

求大佬解释 一下 为什么加了这段就不行了!!!

 let timeId2 = _setInterval(() => {
     console.log(2222)
  }, 1000)

Answer 1

自问自答 大概知道了 id 是个全局变量 设置了第二个定时器, id 的作用域就是全局的
所以第一个timerMap[id]追踪不到 对应的 定时器任务返回值了.
应该设置一个闭包的新变量

const _setInterval = (cb, time) => {
    let timer = id++
    const fn = () => {
      cb()
      timerMap[timer] = setTimeout(fn, time)
    }
    timerMap[timer] = setTimeout(fn, time)
    return timer
}

如果有大佬更好的解释 欢迎解答