关于setTimeout模拟setInterval

今天做一个小项目,发现一个问题,我使用了setInterval()去循环一个函数,效果是没问题的,但是在实现对setInterval()的调节他执行的速度我遇到了问题

设想将setInterval()的时间改为一个变量,可以正常执行,但是我如果改变量时,他并没有改变速度,为什么呢,我去谷歌查阅,发现setInterval()他只会读取一次变量,然后一直执行下去

let n = 0
let n = 1000
let id = setInterval(() => {
  n += 1
  output.innerText = n
  console.log(n)
  if(n>=10){
    window.clearInterval(id)
  }
},n)

修改n的值并不可行

我接着查发现一个方法可以满足我,那就是setTimeout(),他的神奇就是他只执行一次,所以修改变量会起作用

let n = 0
let a = 1000
let id = setTimeout(function(){
  n += 1
  output.innerText = n
},a)

看上面代码,他可以去修改变量更改速度,但是问题又来了,他不循环啊

想到递归,这里使用延时递归一个函数

let n = 0
let id = setTimeout(function(){
  n += 1
  output.innerText = n
  setTimeout(fn, 500)
},500)

还有问题,怎么让他停止呢

let n = 0
let id = setTimeout(function(){
  n += 1
  output.innerText = n
  if(n < 10){
    setTimeout(fn, 500)
  }
  // 这里也不需要clear,因为setTimeout只调用一次
},500)

这感情好啊,还不用写清除,他只要一次不调用就不再执行了

注意,回调函数也不可以是匿名,因为需要回调时调用