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后執行

 轉載自：https://www.cnblogs.com/lengyuehuahun/p/5650030.html