不懂就问,用 setTimeout 简单实现 setInterval 的问题

Question

代码如下

  let timer;
  const _setInterval = (cb, time) => {
    timer = setTimeout(() => {
      cb()
      _setInterval(cb, time)
    }, time)
  }

  _setInterval(() => {
    console.log('count')
  }, 1000)

  setTimeout(() => {
    clearTimeout(timer)
  }, 3001)

我设置清除定时器的时长是 3001ms
但是为什么这段代码 还是只打印了两次 count 啊 不应该是三次吗~有没有大佬分析一波

Answer 1

如果把输出写得详细一点，加上时间信息

    let timer;
    const _setInterval = (cb, time) => {
        timer = setTimeout(() => {
            cb()
            _setInterval(cb, time)
        }, time);
    }

    _setInterval(() => {
        const now = Date.now();
        console.log('count', now, now - start);
    }, 1000)

    setTimeout(() => {
        clearTimeout(timer)
    }, 3001);

    const start = Date.now();
    console.log("start: ", start);

会发现输出并不是精确的 1000 毫秒延时

start:  1617522317036
count 1617522318045 1009
count 1617522319051 2015

用原生的 setInterval() 会更准确一些（因为模拟的 cb() 处理业务会花一些时间），但仍然可能会有非常小的误差的。

Answer 2

JS 里的定时器也依赖 event loop，并不是严格按照时间。所以虽然支持你用 ms 设置定时器，但什么时候触发其实不一定。所以建议至少以 10ms 为标准，也不要让不同定时器互相影响。