window.onresize 多次觸發(fā)的解決方法
之前做一個(gè)擴(kuò)展,需要在改變窗口大小的時(shí)候保證頁(yè)面顯示正常,于是用了 window.onresize 但是發(fā)現(xiàn)每次 onresize 后頁(yè)面中狀態(tài)總是不對(duì),后來(lái)查找出來(lái)原來(lái)是 onresize 事件觸發(fā)了多次找成的,于是網(wǎng)上搜集了下解決辦法,整理一下。
//
關(guān)于 onresize 事件觸發(fā)次數(shù),不同瀏覽器不同,safari, opera, firefox 都是一次(分別只用了一個(gè)版本測(cè)試,都是較新的);
//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 這個(gè)詞不知道怎么翻譯,兄弟我非科班出身,不敢輕易翻譯,以免怡笑大方。:)
//
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);
};
}
// 說(shuō)明代碼不是我寫(xiě)的。
// 代碼說(shuō)明:
debounce 接受 3 個(gè)參數(shù),后兩個(gè)可選;第一個(gè)是要 debounce 的函數(shù), 第二個(gè)代表 debouce 的時(shí)間間隔,第三個(gè)在時(shí)間段的開(kāi)始還是結(jié)束執(zhí)行函數(shù);
debounce 返回包裝好的函數(shù),該函數(shù)兩次執(zhí)行間隔至少是 threshold,并且小于 threshold 間隔的調(diào)用會(huì)重新開(kāi)始計(jì)時(shí)( 兩次調(diào)用的時(shí)間間隔);
把 clearTimeout( timeout ) 換為 timer = null; 返回函數(shù)兩次執(zhí)行間隔至少是 threshold,并且小于 threshold 間隔的調(diào)用會(huì)重新開(kāi)始計(jì)時(shí)( 兩次調(diào)用的時(shí)間間隔);
// 解決 onresize 多次調(diào)用
[code]
window.onresize = debounce( function(){
alert( 'hello world');
}, 100, true)
// 在自動(dòng)補(bǔ)齊中為了減少請(qǐng)求服務(wù)器次數(shù)也會(huì)用到 debounce, 只有連續(xù)敲鍵間隔大于某個(gè)值才會(huì)發(fā)送 ajax
resize只能綁定一個(gè)?
對(duì)的,用下邊這種寫(xiě)法,一個(gè)頁(yè)面中,resize只能綁定一個(gè)。
下邊的代碼,就永遠(yuǎn)只會(huì)打印出“2”,而沒(méi)有“1”。
// resize只能綁定、執(zhí)行一個(gè)。此時(shí)只執(zhí)行后邊那個(gè)。
window.onresize = function(){
console.log("1")
}
window.onresize = function(){
console.log("2")
}
但是用下邊這種寫(xiě)法,倆都可以執(zhí)行了。
// addEventListener綁定,就可以?xún)纱味紙?zhí)行
window.addEventListener("resize", function(){
console.log("3")
});
window.addEventListener("resize", function(){
console.log("4")
});
這樣就結(jié)束了
相關(guān)文章
使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能,以及iframe預(yù)覽報(bào)錯(cuò)問(wèn)題和iframe未能加載PDF文檔,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-09-09
讓textarea自動(dòng)調(diào)整大小的js代碼
讓textarea自動(dòng)調(diào)整大小的js代碼,需要的朋友可以參考下。2011-04-04
微信小程序授權(quán)登錄的最新實(shí)現(xiàn)方案詳解(2023年)
最近由于公司需要研究了一下微信小程序的開(kāi)發(fā),特此記錄一下小程序登錄授權(quán)的流程,便于自己理解,也希望對(duì)他人有多幫助,下面這篇文章主要給大家介紹了關(guān)于微信小程序授權(quán)登錄的最新實(shí)現(xiàn)方案的相關(guān)資料,需要的朋友可以參考下2023-02-02
js實(shí)現(xiàn)同一頁(yè)面可多次調(diào)用的圖片幻燈切換效果
這篇文章主要介紹了js實(shí)現(xiàn)同一頁(yè)面可多次調(diào)用的圖片幻燈切換效果,可實(shí)現(xiàn)在同一頁(yè)面中多次調(diào)用幻燈切換效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
js實(shí)現(xiàn)PC端和移動(dòng)端刮卡效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)PC端和移動(dòng)端刮卡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
如何用JS/HTML將時(shí)間戳轉(zhuǎn)換為“xx天前”的形式
如果我們有一份過(guò)去時(shí)間戳,如何使用JS/HTML將時(shí)間戳轉(zhuǎn)換為“xx天前”的形式呢?很多朋友都覺(jué)得解決辦法有點(diǎn)困難,其實(shí)很簡(jiǎn)單的,下面小編給大家分享完整的實(shí)現(xiàn)代碼,一起看看吧2017-02-02
JS動(dòng)態(tài)生成年份和月份實(shí)例代碼
本文給大家分享兩段代碼來(lái)通過(guò)js動(dòng)態(tài)生成年份和月份功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下2017-02-02

