var i = 1
var timer = setInterval(function(){
console.log(2);
}, 1000);
上面代碼表示每隔1000毫秒就輸出一個2，直到用戶點擊了停止按鈕。
與setTimeout一樣，除了前兩個參數，setInterval方法還可以接受更多的參數，它們會傳入回調函數，下面是一個例子。
function f(){
for (var i=0;i console.log(arguments[i]); } } setInterval(f, 1000, "Hello World"); 如果網頁不在瀏覽器的當前窗口（或tab），許多瀏覽器限制setInteral指定的反覆運行的任務最多每秒執行一次。 下面是一個通過setInterval方法實現網頁動畫的例子。 var p = document.getElementById('somep'); var opacity = 1; var fader = setInterval(function() { opacity -= 0.1; if (opacity >= 0) { p.style.opacity = opacity;
} else {
clearInterval(fader);
}}, 100);
上面代碼每隔100毫秒，設置一次p元素的透明度，直至其完全透明為止。
setInterval的一個常見用途是實現輪詢。下面是一個輪詢URL的Hash值是否發生變化的例子。
var hash = window.location.hash;
var hashWatcher = setInterval(function() {
if (window.location.hash != hash) {
updatePage();
}}, 1000);
setInterval指定的是“開始執行”之間的間隔，並不考慮每次任務執行本身所消耗的時間。因此實際上，兩次執行之間的間隔會小於指定的時間。比如，setInterval指定每100ms執行一次，每次執行需要5ms，那麼第一次執行結束後95毫秒，第二次執行就會開始。如果某次執行耗時特別長，比如需要105毫秒，那麼它結束後，下一次執行就會立即開始。
為了確保兩次執行之間有固定的間隔，可以不用setInterval，而是每次執行結束後，使用setTimeout指定下一次執行的具體時間。
var i = 1;
var timer = setTimeout(function() {
alert(i++);
timer = setTimeout(arguments.callee,2000);
}, 2000);
上面代碼可以確保，下一個對話框總是在關閉上一個對話框之後2000毫秒彈出。
根據這種思路，可以自己部署一個函數，實現間隔時間確定的setInterval的效果。
function interval(func, wait){
var interv = function(){
func.call(null);
setTimeout(interv,wait);
};
setTimeout(interv,wait);
}interval(function(){
console.log(2);
},1000);
上面代碼部署了一個interval函數，用循環調用setTimeout模擬了setInterval。
HTML5標準規定，setInterval的最短間隔時間是10毫秒，也就是說，小於10毫秒的時間間隔會被調整到10毫秒。
3，clearTimeOut(),clearInterval()
setTimeout和setInterval函數，都返回一個表示計數器編號的整數值，將該整數傳入clearTimeout和clearInterval函數，就可以取消對應的定時器。
var id1 = setTimeout(f,1000);
var id2 = setInterval(f,1000);
clearTimeout(id1);
clearInterval(id2);
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--;
}
}})();
運行上面代碼後，實際上再設置任何setTimeout都無效了。
下面是一個clearTimeout實際應用的例子。有些網站會實時將用戶在文本框的輸入，通過Ajax方法傳回服務器，jQuery的寫法如下。
$('textarea').on('keydown', ajaxAction);
這樣寫有一個很大的缺點，就是如果用戶連續擊鍵，就會連續觸發keydown事件，造成大量的Ajax通信。這是不必要的，而且很可能會發生性能問題。正確的做法應該是，設置一個門檻值，表示兩次Ajax通信的最小間隔時間。如果在設定的時間內，發生新的keydown事件，則不觸發Ajax通信，並且重新開始計時。如果過了指定時間，沒有發生新的keydown事件，將進行Ajax通信將數據發送出去。
這種做法叫做debounce（防抖動）方法，用來返回一個新函數。只有當兩次觸發之間的時間間隔大於事先設定的值，這個新函數才會運行實際的任務。假定兩次Ajax通信的間隔不小於2500毫秒，上面的代碼可以改寫成下面這樣。
$('textarea').on('keydown', debounce(ajaxAction, 2500))
利用setTimeout和clearTimeout，可以實現debounce方法，該方法用於防止某個函數在短時間內被密集調用。具體來說，debounce方法返回一個新版的該函數，這個新版函數調用後，只有在指定時間內沒有新的調用，才會執行，否則就重新計時。
function debounce(fn, delay){
var timer = null;// 聲明計時器
return function(){
var context =this;
var args = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context,args);
}, delay);
};
}
// 用法示例
var todoChanges = _.debounce(batchLog, 1000);
Object.observe(models.todo, todoChanges);
現實中，最好不要設置太多個setTimeout和setInterval，它們耗費CPU。比較理想的做法是，將要推遲執行的代碼都放在一個函數里，然後只對這個函數使用setTimeout或setInterval。
4，運行機制
setTimeout和setInterval的運行機制是，將指定的代碼移出本次執行，等到下一輪EventLoop時，再檢查是否到了指定時間。如果到了，就執行對應的代碼；如果不到，就等到再下一輪Event Loop時重新判斷。
這意味著，setTimeout和setInterval指定的代碼，必須等到本輪EventLoop的所有同步任務都執行完，再等到本輪EventLoop的“任務隊列”的所有任務執行完，才會開始執行。由於前面的任務到底需要多少時間執行完，是不確定的，所以沒有辦法保證，setTimeout和setInterval指定的任務，一定會按照預定時間執行。
setTimeout(someTask, 100);
veryLongTask();
上面代碼的setTimeout，指定100毫秒以後運行一個任務。但是，如果後面的veryLongTask函數（同步任務）運行時間非常長，過了100毫秒還無法結束，那麼被推遲運行的someTask就只有等著，等到veryLongTask運行結束，才輪到它執行。
這一點對於setInterval影響尤其大。
setInterval(function () {
console.log(2);
}, 1000);
(function () {
sleeping(3000);
})();
上面的第一行語句要求每隔1000毫秒，就輸出一個2。但是，第二行語句需要3000毫秒才能完成，請問會發生什麼結果？
結果就是等到第二行語句運行完成以後，立刻連續輸出三個2，然後開始每隔1000毫秒，輸出一個2。也就是說，setIntervel具有累積效應，如果某個操作特別耗時，超過了setInterval的時間間隔，排在後面的操作會被累積起來，然後在很短的時間內連續觸發，這可能或造成性能問題（比如集中發出Ajax請求）。
5， setTimeout(f,0)
setTimeout的作用是將代碼推遲到指定時間執行，如果指定時間為0，即setTimeout(f, 0)，那麼會立刻執行嗎？
答案是不會。因為上一段說過，必須要等到當前腳本的同步任務和“任務隊列”中已有的事件，全部處理完以後，才會執行setTimeout指定的任務。也就是說，setTimeout的真正作用是，在“消息隊列”的現有消息的後面再添加一個消息，規定在指定時間執行某段代碼。setTimeout添加的事件，會在下一次Event Loop執行。
setTimeout(f, 0)將第二個參數設為0，作用是讓f在現有的任務（腳本的同步任務和“消息隊列”指定的任務）一結束就立刻執行。也就是說，setTimeout(f, 0)的作用是，儘可能早地執行指定的任務。而並不是會立刻就執行這個任務。
setTimeout(function () {
console.log('hello world！');
}, 0);
上面代碼的含義是，儘可能早地顯示“hello world！”。
setTimeout(f, 0)指定的任務，最早也要到下一次EventLoop才會執行。請看下面的例子。
setTimeout(function() {
console.log("Timeout");
}, 0)
function a(x) {
console.log("a()開始運行");
b(x);
console.log("a()結束運行");
}
function b(y) {
console.log("b()開始運行");
console.log("傳入的值為" + y);
console.log("b()結束運行");
}
console.log("當前任務開始");
a(42);
console.log("當前任務結束");
輸出結果如下：
// 當前任務開始， a() 開始運行， b() 開始運行， 傳入的值為42，b() 結束運行， a() 結束運行， 當前任務結束
上面代碼說明，setTimeout(f, 0)必須要等到當前腳本的所有同步任務結束後才會執行。
即使消息隊列是空的，0毫秒實際上也是達不到的。根據HTML5標準，setTimeout推遲執行的時間，最少是4毫秒。如果小於這個值，會被自動增加到4。這是為了防止多個setTimeout(f, 0)語句連續執行，造成性能問題。
另一方面，瀏覽器內部使用32位帶符號的整數，來儲存推遲執行的時間。這意味著setTimeout最多隻能推遲執行2147483647毫秒（24.8天），超過這個時間會發生溢出，導致回調函數將在當前任務隊列結束後立即執行，即等同於setTimeout(f, 0)的效果。
6 ，正常任務與微任務
正常情況下，JavaScript的任務是同步執行的，即執行完前一個任務，然後執行後一個任務。只有遇到異步任務的情況下，執行順序才會改變。
這時，需要區分兩種任務：正常任務（task）與微任務（microtask）。它們的區別在於，“正常任務”在下一輪EventLoop執行，“微任務”在本輪Event Loop的所有任務結束後執行。
console.log(1);
setTimeout(function() {
console.log(2);
}, 0);
Promise.resolve().then(function() {
console.log(3);
}).then(function() {
console.log(4);
});
console.log(5);
輸出結果如下：
// 1， 5，3，4， 2
上面代碼的執行結果說明，setTimeout(fn, 0)在Promise.resolve之後執行。
這是因為setTimeout語句指定的是“正常任務”，即不會在當前的Event Loop執行。而Promise會將它的回調函數，在狀態改變後的那一輪Event Loop指定為微任務。所以，3和4輸出在5之後、2之前。
正常任務包括以下情況。
• setTimeout
• setInterval
• setImmediate
• I/O
• 各種事件（比如鼠標單擊事件）的回調函數
微任務目前主要是process.nextTick和 Promise 這兩種情況。
閱讀更多 美食代碼喵 的文章
關鍵字: jQuery JavaScript 定時器
