setTimeout妙用

目的：

通过变量控制执行函数的执行时间

初始思路

第一感觉是利用setInterval方法来处理

/*setInterval方法*/
let n = 0
let speed = 50
let clock = setInterval(()=>{
    n+=1
    output.innerText = n 
    if (n>10) {
        window.clearInterval(clock)
    }
},speed)

然而在实际执行后我们发现，当我们在执行的过程中改变变量speed的值的话，执行函数的执行时间并没有随之变化，这是因为浏览器对speed只进行了一次读取，当函数开始执行后，就不会再进行读取。

改进

此时用setTimeout方法可以达到预期效果

/*setTimeout方法*/
let n = 0
let speed = 50
let id =setTimeout(function fn(){
    n+=1
    output.innerText = n
    if (n>10){
    
    }else{
        setTimeout(fn,speed)
    }
},speed)
//关键点在于再次调用fn函数

总结

可以利用setTimeout()来达到setInterval的效果，关键在于再次调用fn函数