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函式