[javascript] 深入了解 setTimeout() 與 setInterval() 的不同之處

許多人認為 setTimeout() 與 setInterval() 的差別僅是一個僅會執行一次,另一個則會自動重複執行這樣的差別。 但其中其實還有許多值得深入與研究的不同之處,這篇將由淺至深地介紹兩者的差別。 setTimeout() 綁定在瀏覽器 window 的一個方法,可以透過 setTimeout 指定一段程式碼或函式在多少毫秒(ms)後執行,並回傳此定時器的編號。 可以透過 clearTimeout 取消程式碼的執行。 例如: setTimeout()執行方法其實是將須執行程式碼加入任務佇列,直到輪到此程式碼執行時,檢查時間是否到達,若到達則執行程式碼。 舉例來說: 接下來我們再測試以下程式碼 可以發現 setTimeout 所設定的程式碼,會因為目前任務佇列所執行的程式碼而可能發生延誤執行的狀況。 再來我們測試一段 setTimeout 執行時間的程式碼 上面這段程式碼,可以看到執行 func 的 end 與 start 時間基本上是符合我們所設定的 100 ms。(待會與下方 setInterval 比較) setInterval() 綁定在瀏覽器 window 的一個方法,可以透過 setInterval 指定一段程式碼或函式定時在多少毫秒(ms)後執行,並回傳此定時器的編號。 可以透過 clearInterval 取消程式碼的執行。 大致用法與 setTimeout 相同,只差在定時執行,因此這邊我們同樣測試延遲執行的問題。 可以發現與 setTimeout 一樣是有延遲的狀況發生。 接下來我們再測試以下程式碼 上面這段程式碼的執行結果,與上面的 setTimeout 比較,你會發現 setInterval 的 end 與 […]

Continue reading