window.onresize 多次觸發(fā)的解決方法
之前做一個擴展,需要在改變窗口大小的時候保證頁面顯示正常,于是用了 window.onresize 但是發(fā)現(xiàn)每次 onresize 后頁面中狀態(tài)總是不對,后來查找出來原來是 onresize 事件觸發(fā)了多次找成的,于是網(wǎng)上搜集了下解決辦法,整理一下。
//
關(guān)于 onresize 事件觸發(fā)次數(shù),不同瀏覽器不同,safari, opera, firefox 都是一次(分別只用了一個版本測試,都是較新的);
//ie6 在 quirk 下觸發(fā) 2 次,標(biāo)準(zhǔn)下 3 次;ie7,8 在 quirk 和 standard 都是兩次。
window.onresize = function(){ console.log( 'hello world'); } onresize 觸發(fā)多少次并不重要,重要的是解決辦法:在觸發(fā)多次的情況下之調(diào)用一次幫定到 onresize 上的函數(shù) // //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 個參數(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)用 [code] window.onresize = debounce( function(){ alert( 'hello world'); }, 100, true) // 在自動補齊中為了減少請求服務(wù)器次數(shù)也會用到 debounce, 只有連續(xù)敲鍵間隔大于某個值才會發(fā)送 ajax
resize只能綁定一個?
對的,用下邊這種寫法,一個頁面中,resize只能綁定一個。
下邊的代碼,就永遠只會打印出“2”,而沒有“1”。
// resize只能綁定、執(zhí)行一個。此時只執(zhí)行后邊那個。 window.onresize = function(){ console.log("1") } window.onresize = function(){ console.log("2") }
但是用下邊這種寫法,倆都可以執(zhí)行了。
// addEventListener綁定,就可以兩次都執(zhí)行 window.addEventListener("resize", function(){ console.log("3") }); window.addEventListener("resize", function(){ console.log("4") });
這樣就結(jié)束了
相關(guān)文章
Bootstrap3.0學(xué)習(xí)教程之JS折疊插件
這篇文章主要介紹了Bootstrap3.0學(xué)習(xí)教程之JS折疊插件的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-05-05javascript實現(xiàn)非常簡單的小數(shù)取整功能示例
這篇文章主要介紹了javascript實現(xiàn)非常簡單的小數(shù)取整功能,結(jié)合具體實例形式分析了javascript數(shù)學(xué)運算取整相關(guān)操作技巧,需要的朋友可以參考下2017-06-06