1. setTimeout()
setTimeout函數(shù)用來指定某個函數(shù)或某段代碼,在多少毫秒之后執(zhí)行。它返回一個整數(shù)踪区,表示定時器的編號,以后可以用來取消這個定時器橱野。
var timerId = setTimeout(func|code, delay);
console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
// 1
// 3
// 2
除了前兩個參數(shù)朽缴,setTimeout還允許更多的參數(shù)。它們將依次傳入推遲執(zhí)行的函數(shù)(回調(diào)函數(shù))水援。
setTimeout(function(a,b){
console.log(a+b);
},1000,1,1)
var x = 1;
var obj = {
x: 2,
y: function () {
console.log(this.x);
}
};
setTimeout(obj.y, 1000) // 1
上面代碼輸出的是1,而不是2茅郎。因為當obj.y在1000毫秒后運行時蜗元,this所指向的已經(jīng)不是obj了,而是全局環(huán)境系冗。
解決方法是
setTimeout(function () {
obj.y();
}, 1000);
// 2
setTimeout(obj.y.bind(obj), 1000)
2. setInterval
setInterval的一個常見用途是實現(xiàn)輪詢奕扣。下面是一個輪詢 URL 的 Hash 值是否發(fā)生變化的例子。
var hash = window.location.hash;
var hashWatcher = setInterval(function(){
if (window.location.hash!= hash){updatePage()};
},1000)
3. clearTimeout() clearInterval()
var id1 = setTimeout(f, 1000);
var id2 = setInterval(f, 1000);
clearTimeout(id1);
clearInterval(id2);
setTimeout和setInterval返回的整數(shù)值是連續(xù)的掌敬,也就是說惯豆,第二個setTimeout方法返回的整數(shù)值,將比第一個的整數(shù)值大1
(function(){
// 每輪事件循環(huán)檢查一次
var gid = setInterval(clearAllTimeouts, 0);
function clearAllTImeouts() {
var id = setTimeout(function(){}, 0);
where(id >0){
if(id ! = gid) {clearTimeout(id);} id --;
}
}
})
debounce
防抖動
$('textarea').on('keydown', debounce(ajaxAction, 2500));
function debounce(fn, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
clearTImeout(timer);
timer = setTime
}
}
setTimeout(f, 0)
1. 含義
setTimeout的作用是將代碼推遲到指定時間執(zhí)行奔害,如果指定時間為0楷兽,即setTimeout(f,0)
setTimeout(f, 0)這種寫法的目的是,盡可能早地執(zhí)行f华临,但是并不能保證立刻就執(zhí)行f芯杀。
document.getElementById('input-box').onkeypress = function (event) {
this.value = this.value.toUpperCase();
}
上面代碼想在用戶每次輸入文本后,立即將字符轉(zhuǎn)成大寫雅潭。但是實際上揭厚,它只能將本次輸入前的字符轉(zhuǎn)為大寫,因為瀏覽器此時還沒有接受到新的文本扶供,所以this.value 取不到最新輸入的那個字符筛圆,只有用setTimeout改寫,上面的代碼才能發(fā)揮作用
document.getElementById('input-box').onkeypress = function() {
var self = this;
setTimeout(function(){
self.value = self.value.toUpperCase();
},0)
}
上面代碼將代碼放入setTimeout之中椿浓,就能使得它在瀏覽器接收到文本之后觸發(fā)太援。
由于setTimeout(f, 0)實際上意味著一铅,將任務放到瀏覽器最早可得的空閑時段執(zhí)行,所以那些計算量大扼菠、耗時長的任務烛亦,常常會被放到幾個小部分,分別放到setTimeout(f, 0)里面執(zhí)行唧垦。