JavaScript中setInterval()與setTimeout()計時器有什么用

這篇文章主要為大家展示了“JavaScript中setInterval()與setTimeout()計時器有什么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“JavaScript中setInterval()與setTimeout()計時器有什么用”這篇文章吧。

　　JavaScript是單線程語言，但是它可以通過設置超時值和間歇時間值來指定代碼在特定的時刻執行。超時值是指在指定時間之后執行代碼，間歇時間值是指每隔指定的時間就執行一次代碼。

　　超時調用

　　超時調用使用window對象的setTimeout()方法，它接受兩個參數：要執行的代碼和以毫秒表示的時間（代碼執行前的等待時間）。其中，第一個參數可以是一個字符串（和eval()中使用的字符串一樣），也可以是一個函數。

　　第二個參數是一個表示等待多長時間的毫秒數，但是在該時間過去后代碼并不一定執行。JavaScript是一個單線程序的解釋器，因此一定時間內只能執行一段代碼。為了控制要執行的代碼，就有一個JavaScript任務隊列。這些任務會按照將它們添加到任務隊列的順序執行。setTimeout()的第二個參數告訴JavaScript再過多長時間把當前任務添加到隊列中。如果隊列是空的，那么添加的代碼則會立即執行；如果隊列不是空的，那么添加的代碼會在前面的代碼執行完畢后再執行。

　　調用setTimeout()之后，該方法會返回一個數值ID，表示超時調用。這個超時調用ID是計劃執行代碼的唯一標識符，可以通過它來取消超時調用。取消超時調用使用方法clearTimeout();　　

間歇調用

　　間歇調用與超時調用類似，只不過它會按照指定的時間間隔重復執行代碼，直至間歇調用被取消或頁面被卸載。設置間歇調用的方法是setInterval()，它接收的參數與setTimeout()相同。取消間歇調用的重要性遠高于超時調用。

　　但是通常情況下，很少真正使用間歇調用，因為后一個間歇調用可能在前一個間歇調用結束之前調用。因此，我們通常會使用超時調用來模擬間歇調用

下面看兩個小demo：

　　1、獲得當前日期并讓它顯示在文本框內，點擊“stop”按鈕后事件靜止。（間歇調用）　

　HTML代碼：

<input type="text" size="50" id="clock" />
<input type="button" value="Stop" id="btn" />

JavaScript代碼：

function clock(){
  var time = new Date();
  document.getElementById("clock").value = time;  
  var btn =document.getElementById("btn");
  btn.onclick = function(){
    clearInterval(t); 
  }
}
var t = setInterval(clock,1000);

　　2、使用setTimeou()實現計數統計效果，并在文本框中顯示數值。

　　HTML代碼：

<input type="text" id="count" />

　　JavaScript代碼：

var num = 0;
function startCount(){
  document.getElementById("count").value = num;
  num += 1;
  setTimeout(startCount,1000);  //setTimeout是超時調用，使用遞歸模擬間歇調用
}  
setTimeout(startCount,1000);  //1s后執行

以上是“JavaScript中setInterval()與setTimeout()計時器有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！