之前做一個擴展,需要在改變窗口大小的時候保證頁面顯示正常,于是用了 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 都是兩次。
防抖動代碼如下:
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)用
window.onresize = debounce( function(){
alert( 'hello world');
}, 100, true)