欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

window.onresize 多次觸發(fā)的解決方法

 更新時(shí)間:2013年11月08日 17:39:23   投稿:whsnow  
用了window.onresize但是發(fā)現(xiàn)每次 onresize 后頁面中狀態(tài)總是不對,下面與大家分享下onresize 事件多次觸發(fā)的解決方法

之前做一個(gè)擴(kuò)展,需要在改變窗口大小的時(shí)候保證頁面顯示正常,于是用了 window.onresize 但是發(fā)現(xiàn)每次 onresize 后頁面中狀態(tài)總是不對,后來查找出來原來是 onresize 事件觸發(fā)了多次找成的,于是網(wǎng)上搜集了下解決辦法,整理一下。
//
關(guān)于 onresize 事件觸發(fā)次數(shù),不同瀏覽器不同,safari, opera, firefox 都是一次(分別只用了一個(gè)版本測試,都是較新的);
//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); 
}; 
} 
// 說明代碼不是我寫的。 
// 代碼說明: 
debounce 接受 3 個(gè)參數(shù),后兩個(gè)可選;第一個(gè)是要 debounce 的函數(shù), 第二個(gè)代表 debouce 的時(shí)間間隔,第三個(gè)在時(shí)間段的開始還是結(jié)束執(zhí)行函數(shù); 
debounce 返回包裝好的函數(shù),該函數(shù)兩次執(zhí)行間隔至少是 threshold,并且小于 threshold 間隔的調(diào)用會(huì)重新開始計(jì)時(shí)( 兩次調(diào)用的時(shí)間間隔); 
把 clearTimeout( timeout ) 換為 timer = null; 返回函數(shù)兩次執(zhí)行間隔至少是 threshold,并且小于 threshold 間隔的調(diào)用會(huì)重新開始計(jì)時(shí)( 兩次調(diào)用的時(shí)間間隔); 
// 解決 onresize 多次調(diào)用 
[code] 
window.onresize = debounce( function(){ 
alert( 'hello world'); 
}, 100, true) 


// 在自動(dòng)補(bǔ)齊中為了減少請求服務(wù)器次數(shù)也會(huì)用到 debounce, 只有連續(xù)敲鍵間隔大于某個(gè)值才會(huì)發(fā)送 ajax

resize只能綁定一個(gè)?

對的,用下邊這種寫法,一個(gè)頁面中,resize只能綁定一個(gè)。

下邊的代碼,就永遠(yuǎn)只會(huì)打印出“2”,而沒有“1”。

// resize只能綁定、執(zhí)行一個(gè)。此時(shí)只執(zhí)行后邊那個(gè)。
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)文章

  • bootstrap模態(tài)框消失問題的解決方法

    bootstrap模態(tài)框消失問題的解決方法

    這篇文章主要為大家詳細(xì)整理了bootstrap模態(tài)框消失不消失各種問題的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JS獲取select的value和text值的簡單實(shí)例

    JS獲取select的value和text值的簡單實(shí)例

    本篇文章主要是對JS獲取select的value和text值的簡單實(shí)例進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
    2014-02-02
  • Bootstrap3.0學(xué)習(xí)教程之JS折疊插件

    Bootstrap3.0學(xué)習(xí)教程之JS折疊插件

    這篇文章主要介紹了Bootstrap3.0學(xué)習(xí)教程之JS折疊插件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2016-05-05
  • javascript實(shí)現(xiàn)非常簡單的小數(shù)取整功能示例

    javascript實(shí)現(xiàn)非常簡單的小數(shù)取整功能示例

    這篇文章主要介紹了javascript實(shí)現(xiàn)非常簡單的小數(shù)取整功能,結(jié)合具體實(shí)例形式分析了javascript數(shù)學(xué)運(yùn)算取整相關(guān)操作技巧,需要的朋友可以參考下
    2017-06-06
  • js模仿hover的具體實(shí)現(xiàn)代碼

    js模仿hover的具體實(shí)現(xiàn)代碼

    hover效果,想必大家并不陌生吧,接下來為大家介紹下使用js模仿hover,感興趣的朋友可以參考下
    2013-12-12
  • vue渲染大量數(shù)據(jù)時(shí)卡頓卡死解決方法

    vue渲染大量數(shù)據(jù)時(shí)卡頓卡死解決方法

    這篇文章主要介紹了vue渲染大量數(shù)據(jù)時(shí)發(fā)生卡頓卡死問題時(shí)的解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • bootstrap multiselect下拉列表功能

    bootstrap multiselect下拉列表功能

    這篇文章主要為大家詳細(xì)介紹了bootstrap multiselect下拉列表功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • JS 拼湊字符串的簡單實(shí)例

    JS 拼湊字符串的簡單實(shí)例

    下面小編就為大家?guī)硪黄狫S 拼湊字符串的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-09-09
  • HTTP?HEAD請求的使用場合實(shí)例詳解

    HTTP?HEAD請求的使用場合實(shí)例詳解

    這篇文章主要為大家介紹了HTTP?HEAD請求的使用場合實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-12-12
  • 網(wǎng)站404頁面3秒后跳到首頁的實(shí)例代碼

    網(wǎng)站404頁面3秒后跳到首頁的實(shí)例代碼

    我們看到很多網(wǎng)站會(huì)有有錯(cuò)誤404頁面,當(dāng)頁面不存存時(shí)就會(huì)提示,然后過幾秒就會(huì)自動(dòng)跳到首頁了,下面我來給大家舉一個(gè)404錯(cuò)誤頁面跳到首頁實(shí)例,各位可參考,有需要的朋友可以參考一下
    2013-08-08

最新評論