Javascript學習筆記-定時器

Javascript學習筆記-定時器
簡介

JavaScript提供定時執行代碼的功能，叫做定時器（timer），主要由setTimeout()和setInterval()這兩個函數來完成。

TimeoutsetTimeout功能：指定某個函數或某段代碼，在多少毫秒之後執行 文法：var timerId = setTimeout(func|code, delay) 參數
Javascript語句字串或者函數：要被執行的代碼 時間間隔（毫秒）：指示從當前起多少毫秒後執行第一個參數 傳回值：一個整數，表示定時器的編號，以後可以用來取消這個定時器

執行個體

//Javascript語句字串setTimeout("alert('5 seconds!')", 5000);//函數setTimeout(function() {    alert('5 seconds!');}, 5000)

clearTimeout功能：取消指定的定時任務，已經開始執行的任務無法取消（？） 參數：定時事件id，即setTimeout執行後的傳回值 傳回值：undefined

執行個體：

var timedTaskId = setTimeout("alert('5 seconds!')", 5000);clearTimeout(timedTaskId);

IntervalsetInterval功能：按照指定的周期（以毫秒計）來調用函數或計算運算式 文法：setInterval(code,millisec[,”lang”]) 參數
code：必需，要調用的函數或要執行的代碼串 millisec：必須，周期性執行或調用 code 之間的時間間隔，以毫秒計 傳回值：一個可以傳遞給 Window.clearInterval() 從而取消對 code 的周期性執行的值

樣本：

 //Javascript語句字串setInterval("alert('5 seconds!')", 5000);//函數setInterval(function() {    alert('5 seconds!');}, 5000)

clearInterval功能：取消由 setInterval() 設定的定時任務 文法：clearInterval(id_of_setinterval) 參數
id_of_setinterval：由 setInterval() 返回的 ID 值 傳回值：undefined

樣本

var timedTaskId = setInterval("alert('5 seconds!')", 5000);clearInterval(timedTaskId);

運行機制

參考《JavaScript 標準參考教程》的定時器的運行機制

常見問題帶迴圈調用的定時任務

可以通過建立一個函數迴圈重複調用setTimeout來實作類別似setInterval的功能，樣本如下所示：

function showTime() {    var today = new Date();    alert( " The time is: " + today.toString());    setTimeout( " showTime() " , 5000 );}showTime();

上面展示的代碼實現的功能，可以使用setInterval實現代碼如下所示：

function showTime() {    var today = new Date();    alert( " The time is: " + today.toString());}setInterval("showTime()", 5000);

轉載：這兩種方法可能看起來非常像，而且顯示的結果也會很相似，不過兩者的最大區別就是，setTimeout方法不會每隔5秒鐘就執行一次showTime函數，它是在每次調用setTimeout後過5秒鐘再去執行showTime函數。這意味著如果showTime函數的主體部分需要2秒鐘執行完，那麼整個函數則要每7秒鐘才執行一次。而setInterval卻沒有被自己所調用的函數所束縛，它只是簡單地每隔一定時間就重複執行一次那個函數。如果要求在每隔一個固定的時間間隔後就精確地執行某動作，那麼最好使用setInterval，而如果不想由於連續調用產生互相干擾的問題，尤其是每次函數的調用需要繁重的計算以及很長的處理時間，那麼最好使用setTimeout

回呼函數傳參setTimeout可以在第二個參數後加入更多的參數，這些參數依次作為回呼函數調用時的參數使用，但是IE9.0及以下版本不支援。樣本：
function add(a, b) {
console.log(a + b);
}
setTimeout(add, 1000, 1, 1); 匿名函數調用回呼函數傳參。樣本：
function add(a, b) {
console.log(a + b);
}
setTimeout(function() {
add(1, 1);
}, 1000); 使用bind方法，把多餘的參數綁定在回呼函數上面，產生一個新的函數駛入setTimeout。樣本：
function add(a, b) {
console.log(a + b);
}
setTimeout(add.bind(null, 1, 1), 1000); 自訂setTimeout，使用apply方法將參數輸入回呼函數

註：setInterval的回呼函數的參數問題同setTimeout

回呼函數範圍問題

定時器預設的回呼函數在執行時的範圍指向全域環境，而不是定義該回呼函數的的對象。解決辦法：
1. 匿名函數內部使用回呼函數的歸屬對象來調用，或者使用apply來修改範圍
2. 使用bind方法，將回呼函數的範圍綁定在指定對象上

取消所有的定時任務

setTimeout和setInterval函數，都返回一個表示計數器編號的整數值，將該整數傳入clearTimeout和clearInterval函數，就可以取消對應的定時器。setTimeout和setInterval返回的整數值是連續的，也就是說，第二個setTimeout方法返回的整數值，將比第一個的整數值大1。利用這一點，可以寫一個函數，取消當前所有的setTimeout。樣本：

(function() {  var gid = setInterval(clearAllTimeouts, 0);  function clearAllTimeouts() {    var id = setTimeout(function() {}, 0);    while (id > 0) {      if (id !== gid) {        clearTimeout(id);      }      id--;    }  }})();

註：本段摘自《JavaScript 標準參考教程》-定時器篇

setTimeout(f,0)

通過學習定時器的運行機制可以知道，f不會立即執行，它必須等到當前指令碼的同步任務和“任務隊列”中已有的事件，全部處理完後，才會執行。更多請參考《JavaScript 標準參考教程》-定時器的setTimeout(f,0)含義

時間間隔的最大值

32位元字，超過了為溢出，直接取0

應用輸入框防震

參考《JavaScript 標準參考教程》-定時器的clearTimeout實際應用

setTimeout(f,0)

根據setTimeout(f,0)的特性，它有很多應用情境，更多請參考《JavaScript 標準參考教程》-定時器的setTimeout(f,0)應用

參考文獻w3school-JavaScript 計時 w3school-HTML DOM setInterval() 方法 w3school-HTML DOM clearInterval() 方法 阮一峰-定時器

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。