之前做一個擴展,需要在改變窗口大小的時候保證頁面顯示正常,于是用了 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);
};
}
復制代碼 代碼如下:
window.onresize = debounce( function(){
alert( 'hello world');
}, 100, true)
新聞熱點
疑難解答
圖片精選