用setTimeout()替代setInterval()

為什么要用setTimeout()替代setInterval()？

應用場景：速度切換

通過改變duration的值更改setTimeout()執行時間從而更改事件發生的速度。

設置變量duration,在

setInterval(() = {
// 執行代碼
}, duration)

中，當你調用setInterval()時，只調用一次duration，那么當你更改duration時，setInterval()無法讀取新的變化后的duration值。

如何用setTimeout()替代setInterval()？

舉個例子：

let n = 0;
let id = setInterval(() => {
  n+=1;
  output.innerText=n; // 輸出n
  if(條件){
    window.clearInterval(id);
  }
}, 100);

用setTimeout()替代setInterval()：

let n = 0;
setTimeout(function fn(){
  n+=1;
  output.innerText=n; // 輸出n
  if(條件){
    setTimeout(fn, 500);
  }
}, 100);

添加變量duration后：

let n = 0;
let duration = 100; // 給duration賦初值
setTimeout(function fn(){
  n+=1;
  output.innerText=n; // 輸出n
  if(條件){
    setTimeout(fn, duration); // 在setTimeout()中（延時的）遞歸調用且不滿足條件時，中斷是默認的
  }
}, duration);

這樣在調用setTimeout()時每次的都會讀取duration，得到變化的新duration值。

 

總體講的還比較籠統，（先挖坑，后期填上）。