setInterval()與setTimeout()計時器

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

　　超時調用

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

　　

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

 

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

　　

 

 

　 　間歇調用

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

　　

　　可是一般狀況下，不多真正使用間歇調用，由於後一個間歇調用可能在前一個間歇調用結束以前調用。所以，咱們一般會使用超時調用來模擬間歇調用

　　

 

　　下面看兩個小demo：

　　一、得到當前日期並讓它顯示在文本框內，點擊「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);

　　

　　二、使用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後執行