window.onresize多次觸發的解決方法_javascript技巧

之前做一個擴展，需要在改變窗口大小的時候保證頁面顯示正常，于是用了 window.onresize 但是發現每次 onresize 后頁面中狀態總是不對，后來查找出來原來是 onresize 事件觸發了多次找成的，于是網上搜集了下解決辦法，整理一下。
//
關于 onresize 事件觸發次數，不同瀏覽器不同，safari, opera, firefox 都是一次(分別只用了一個版本測試，都是較新的);
//ie6 在 quirk 下觸發 2 次，標準下 3 次；ie7，8 在 quirk 和 standard 都是兩次。
代碼如下:
window.onresize = function(){
console.log( 'hello world');
}
onresize 觸發多少次并不重要，重要的是解決辦法：在觸發多次的情況下之調用一次幫定到 onresize 上的函數
//
//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 個參數，后兩個可選；第一個是要 debounce 的函數， 第二個代表 debouce 的時間間隔，第三個在時間段的開始還是結束執行函數;
debounce 返回包裝好的函數，該函數兩次執行間隔至少是 threshold，并且小于 threshold 間隔的調用會重新開始計時( 兩次調用的時間間隔);
把 clearTimeout( timeout ) 換為 timer = null; 返回函數兩次執行間隔至少是 threshold，并且小于 threshold 間隔的調用會重新開始計時( 兩次調用的時間間隔);
// 解決 onresize 多次調用
代碼如下:
window.onresize = debounce( function(){
alert( 'hello world');
}, 100, true)

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com