清除所有定时器计时器

今天也是心血来潮，之前做一个需求是手机号绑定和邮箱绑定的，都需要获取验证码倒计时，还要弹窗打开就恢复默认，其实就是清除计时器。

讲道理，一般也就一个计时器在跑，测试愣是提出了我点击获取手机验证码马上取消，然后点击获取邮箱验证码，我当时就想了一下原生应该提供了清除所有计时器的方法，结果没有，只好定义了六个变量来获取不同的计时器，然后分别清除。

今天看了一下setInterval和setTimeout返回的ID，都是数字，而且是递增的关系。我在一个HTML里面引入a.js和b.js，两个js里面都设置了一setInterval和setTimeout。

a.js：
let at1 = setTimeout(function () {})
let at2 = setTimeout(function () {})
let at3 = setTimeout(function () {
  let at4 = setTimeout(function () {})
  let at5 = setTimeout(function () {})
  let at6 = setTimeout(function () {})
  console.log('at4：' + at4);
  console.log('at5：' + at5);
  console.log('at6：' + at6);
}, 5000)
let ai1 = setInterval(function () {})
let ai2 = setInterval(function () {})
console.log('at1：' + at1);
console.log('at2：' + at2);
console.log('at3：' + at3);
console.log('ai1：' + ai1)
console.log('ai2：' + ai2)

b.js：
let bt1 = setTimeout(function () {})
let bt2 = setTimeout(function () {})
let bt3 = setTimeout(function () {
let bt4 = setTimeout(function () {})
let bt5 = setTimeout(function () {})
let bt6 = setTimeout(function () {})
  console.log('bt4：' + bt4);
  console.log('bt5：' + bt5);
  console.log('bt6：' + bt6);
}, 2000)
let bi1 = setInterval(function () {})
let bi2 = setInterval(function () {})
console.log('bt1：' + bt1);
console.log('bt2：' + bt2);
console.log('bt3：' + bt3);
console.log('bi1：' + bi1)

HTML里面：
<script src="./a.js"></script>
<script src="./b.js"></script>
<script>
  let c1 = setInterval(function () {})
  let c2 = setInterval(function () {})
  let c3 = setTimeout(function () {})
  console.log('c1：' + c1)
  console.log('c2：' + c2)
  console.log('c3：' + c3)
</script>console.log('bi2：' + bi2)

结果：

这表明setInterval和setTimeout返回的ID是一起递增的，想要清除所有的

setInterval和setTimeout，只要新加一个然后循环清除：

let endTid = setTimeout(function () {});
for (let i = 0; i <= endTid; i++) {
  clearTimeout(i)
  clearInterval(i)
}

因为是同步的，所以不用担心你刚好清除的时候又新增了一个。如果不放心，完全可以循环一个大一点的值，一般来说，项目超过几十个定时器应该是没有。