Web前端入门第 87 问：JavaScript 中 setInterval 和 setTimeout 细节

setInterval 和 setTimeout 两者都是用于控制 JS 函数延迟执行，但是在执行机制和用途上还是有点儿差异。

虽然说两者功能上有区别，但在使用上却可以相互模拟各自的功能，大胆的猜测下：也许浏览器内核底层都是同一个方法，只是上层封装出的两个语法糖而已。

语法

两者在语法上极其相似，除了方法名不一样，其他地方没有任何区别：

// 启动定时器
const intervalID = setInterval(func, delay, [arg1], [arg2], ...);
const timeoutID = setTimeout(func, delay, [arg1], [arg2], ...);

// 停止定时器
clearInterval(intervalID);
clearTimeout(timeoutID);

执行次数区别

• setInterval 用于控制函数在指定时间间隔重复执行，直到程序代码手动清除定时任务或浏览器进程退出。

<div id="output"></div>

<script>
  (() => {
    const output = document.getElementById('output')
    function handle (...args) {
      output.innerHTML += args.join('、') + '<br>'
    }
    // 传入参数 '前端路引'
    setInterval(handle, 1500, '公众号', '前端路引');
  })();
</script>

效果：

• setTimeout 用于控制函数在延迟时间后执行一次，然后自动停止。可以通过递归调用模拟 setInterval。

<div id="output"></div>

<script>
  (() => {
    const output = document.getElementById('output')
    function handle (...args) {
      output.innerHTML += args.join('、') + '<br>'
      /*
      默认情况只执行一次，可通过
      递归调用模拟 setInterval
      */
      setTimeout(handle, 1500, ...args);
    }
    // 传入参数 '前端路引'
    setTimeout(handle, 1500, '公众号', '前端路引');
  })();
</script>

效果：

取消定时器区别

从语法上就能看出来，取消定时器的时需要使用对应的取消方法，不能混用：

• clearInterval

<button>取消定时器</button>
<div id="output"></div>

<script>
  (() => {
    const output = document.getElementById('output')
    function handle (...args) {
      output.innerHTML += args.join('、') + '<br>'
    }
    // 传入参数 '前端路引'
    const intervalID = setInterval(handle, 1500, '公众号', '前端路引');
    document.querySelector('button').addEventListener('click', () => {
      clearInterval(intervalID)
    })
  })();
</script>

效果：

• clearTimeout

<button>取消定时器</button>
<div id="output"></div>

<script>
  (() => {
    const output = document.getElementById('output')
    function handle (...args) {
      output.innerHTML += args.join('、') + '<br>'
      // 递归调用模拟 setInterval
      timeoutID = setTimeout(handle, 1500, ...args);
    }
    // 传入参数 '前端路引'
    let timeoutID = setTimeout(handle, 1500, '公众号', '前端路引');
    document.querySelector('button').addEventListener('click', () => {
      clearTimeout(timeoutID)
    })
  })();
</script>

效果：

可靠性

重点！

记得最开始学习 JS 的时候就有看到说明，setInterval 的定时器是不管任务执行耗时，反正每次到了时间就要执行，不论是否有耗时任务正在执行。而 setTimeout 启动的定时器，会在等到耗时任务执行之后才会启动下一次任务。

所以，如果 setInterval 设定间隔 100ms，但回调需 200ms 执行，就会造成任务堆积，从而引发性能问题，解决办法就是使用递归 setTimeout 来替代。

语言有些空洞，看例子：

<button>取消 interval 定时器</button>
<div id="output"></div>

<script>
  (() => {
    const output = document.getElementById('output')
    let times = 0

    function sleep (ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    }

    async function handle () {
      await sleep(1000)
      output.innerHTML = ++times
    }

    const intervalID = setInterval(handle, 200);

    document.querySelector('button').addEventListener('click', () => {
      clearInterval(intervalID)
    })
  })();
</script>

以上代码由于 handle 任务耗时过长， setInterval 定时器并不会等待任务执行完毕，而是直接执行下一次任务，这就会有一个问题，如果清除定时器，任务不会立即停止，还是有部分执行中的任务正在运行。效果：

setTimeout 在处理这种情况时，也会存在问题，虽然每次任务会进行排队，但在点击停止按钮时，由于有异步耗时任务正在执行，清除定时器时，没办法立即终止任务，可以尝试下以下代码：

<button>取消 timeout 定时器</button>
<div id="output"></div>

<script>
  (() => {
    const output = document.getElementById('output')
    let times = 0

    function sleep (ms) {
      return new Promise(resolve => setTimeout(resolve, ms))
    }

    async function handle () {
      await sleep(1000)
      
      output.innerHTML = ++times
      // 递归调用模拟 setInterval
      timeoutID = setTimeout(handle, 200);
    }

    let timeoutID =setTimeout(handle, 200);

    document.querySelector('button').addEventListener('click', () => {
      // 由于存在异步耗时任务，清除定时器可能会无效
      clearTimeout(timeoutID)
    })
  })();
</script>

效果：

使用 AbortController 停止定时器：

<button>取消 timeout 定时器</button>
<div id="output"></div>

<script>
  (() => {
    const output = document.getElementById('output')
    let times = 0

    function sleep (ms, signal) {
      return new Promise(resolve => {
        setTimeout(() => {
          if (signal.aborted) {
            return Promise.reject(new DOMException('操作已被取消', 'AbortError'));
          }
          resolve()
        }, ms)
      })
    }

    async function handle (signal) {
      await sleep(1000, signal)
      
      output.innerHTML = ++times
      // 递归调用模拟 setInterval
      timeoutID = setTimeout(handle, 200, controller.signal);
    }

    const controller = new AbortController();

    let timeoutID =setTimeout(handle, 200, controller.signal);

    document.querySelector('button').addEventListener('click', () => {
      controller.abort();
    })
  })();
</script>

上面代码中运用了 AbortController 这个控制器终止定时任务，在任务终止后，直接抛出异常，停止定时器。效果：

写在最后

定时器是个好东西，但细节也很多，稍不注意就会出现流程错误，所以在使用时还是需要仔细斟酌~~

setInterval 和 setTimeout 没有绝对的应用场景，两者在使用上都可以互相模拟，只是编写代码量的多少而已。