window.onresize 多次觸發(fā)的解決方法(防抖動方法,減少請求服務器次數(shù)也會用到 debounce, 只有連續(xù)敲鍵間隔大于某個值才會發(fā)送 ajax)

之前做一個擴展,需要在改變窗口大小的時候保證頁面顯示正常,于是用了 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)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容