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)
time (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