iT邦幫忙

0

深入與詳細了解 JS setTimeout 和 setInterval

  • 分享至 

  • xImage

請問有書籍或是網路上的詳解可以完全深入了解這兩個語法的差異與底層的運作?
爬了很多文章,幾乎資料都很分散,難以統整

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
fillano
iT邦超人 1 級 ‧ 2021-12-15 15:25:51
最佳解答

補充一下。

關鍵字:event loop。setTimeout跟setInterval都是其中一部份,google一下會有很多資料,也有鐵人賽文章介紹這個的。

global scope的程式碼跑完,接下來的程式會進入event loop階段,各種程式會分類排入event loop裡面不同優先權的佇列,根據優先權及觸發執行的條件來執行。timer是其中一種機制,setTimeout跟setInterval是timer中的兩種方法。

timer優先權不是最高的,而且如果其他程式還沒跑完但是時間已經到了,也得跑完才會輪到timer,所以timer是不精確的,一定會跑,但是可能會比較慢才跑。

event loop並沒有一個標準,通常是依照執行環境的需求來實做的,瀏覽器跟node.js就有不一樣的機制。

用白話點說明好了。

雖然是設定了 1000(1秒)。並不代表1秒就執行。
只能確定是1秒後執行。

其實除了 loop 還有pause的情況的。

感謝補充 謝謝大大

3

setTimeout : 時間到了執行程式

setInterval : 固定時間持續的執行程式

例子:

<script>
 var timeOutNum=0;
 var intervalNum=0;
 setTimeout(function(){
     timeOutNum++;
     console.log('setTimeout :'+timeOutNum);
 },1000);
 setInterval(function(){
     intervalNum++;
     console.log('setInterval :'+intervalNum);
 },1000);
</script>

這樣運行後,你會在 console 內看到,第一秒會出現

setTimeout :1
setInterval :1

之後每秒會出現
setInterval:2

10秒後的內容會大約是如下

setTimeout :1
setInterval :1
setInterval :2
setInterval :3
setInterval :4
setInterval :5
setInterval :6
setInterval :7
setInterval :8
setInterval :9
setInterval :10



感謝補充 謝謝

我要發表回答

立即登入回答