window.onresize 多次觸發(fā)的解決方法

更新時間：2013年11月08日 17:39:23 投稿：whsnow

用了window.onresize但是發(fā)現(xiàn)每次 onresize 后頁面中狀態(tài)總是不對，下面與大家分享下onresize 事件多次觸發(fā)的解決方法

之前做一個擴展，需要在改變窗口大小的時候保證頁面顯示正常，于是用了 window.onresize 但是發(fā)現(xiàn)每次 onresize 后頁面中狀態(tài)總是不對，后來查找出來原來是 onresize 事件觸發(fā)了多次找成的，于是網(wǎng)上搜集了下解決辦法，整理一下。
//
關(guān)于 onresize 事件觸發(fā)次數(shù)，不同瀏覽器不同，safari, opera, firefox 都是一次(分別只用了一個版本測試，都是較新的);
//ie6 在 quirk 下觸發(fā) 2 次，標準下 3 次；ie7，8 在 quirk 和 standard 都是兩次。

window.onresize = function(){ 
console.log( 'hello world'); 
} 
onresize 觸發(fā)多少次并不重要，重要的是解決辦法：在觸發(fā)多次的情況下之調(diào)用一次幫定到 onresize 上的函數(shù) 
// 
//debounce 這個詞不知道怎么翻譯，兄弟我非科班出身，不敢輕易翻譯，以免怡笑大方。:) 
// 
var debounce = function (func, threshold, execAsap) { 
var timeout; 
return function debounced () { 
var obj = this, args = arguments; 
function delayed () { 
if (!execAsap) 
func.apply(obj, args); 
timeout = null; 
}; 
if (timeout) 
clearTimeout(timeout); 
else if (execAsap) 
func.apply(obj, args); 
timeout = setTimeout(delayed, threshold || 100); 
}; 
} 
// 說明代碼不是我寫的。 
// 代碼說明: 
debounce 接受 3 個參數(shù)，后兩個可選；第一個是要 debounce 的函數(shù)， 第二個代表 debouce 的時間間隔，第三個在時間段的開始還是結(jié)束執(zhí)行函數(shù); 
debounce 返回包裝好的函數(shù)，該函數(shù)兩次執(zhí)行間隔至少是 threshold，并且小于 threshold 間隔的調(diào)用會重新開始計時( 兩次調(diào)用的時間間隔); 
把 clearTimeout( timeout ) 換為 timer = null; 返回函數(shù)兩次執(zhí)行間隔至少是 threshold，并且小于 threshold 間隔的調(diào)用會重新開始計時( 兩次調(diào)用的時間間隔); 
// 解決 onresize 多次調(diào)用 
[code] 
window.onresize = debounce( function(){ 
alert( 'hello world'); 
}, 100, true) 


// 在自動補齊中為了減少請求服務器次數(shù)也會用到 debounce, 只有連續(xù)敲鍵間隔大于某個值才會發(fā)送 ajax

resize只能綁定一個？

對的，用下邊這種寫法，一個頁面中，resize只能綁定一個。

下邊的代碼，就永遠只會打印出“2”，而沒有“1”。

// resize只能綁定、執(zhí)行一個。此時只執(zhí)行后邊那個。
window.onresize = function(){
  console.log("1")
}
window.onresize = function(){
  console.log("2")
}

但是用下邊這種寫法，倆都可以執(zhí)行了。

// addEventListener綁定，就可以兩次都執(zhí)行
window.addEventListener("resize", function(){
  console.log("3")
});
window.addEventListener("resize", function(){
  console.log("4")
});

這樣就結(jié)束了

您可能感興趣的文章: