成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

節(jié)流函數(shù)怎么寫？

twohappy / 2991人閱讀

摘要：真正的節(jié)流應(yīng)該是在可接受的范圍內(nèi)盡量延長這個調(diào)用時間，也就是我們自己控制這個執(zhí)行頻率，讓函數(shù)減少調(diào)用以達到減少計算提升性能的目的。

平時我們在開發(fā)中，會經(jīng)常使用到resize和movesemove事件，這些事件會在短時間內(nèi)頻繁的執(zhí)行事件綁定程序，我們知道頻繁的操作DOM會帶來很大的性能消耗，頁面會促發(fā)回流和重繪。有時候頁面會出現(xiàn)卡頓，在IE瀏覽器下可能直接崩潰。這時候節(jié)流函數(shù)就發(fā)揮作用了。

什么是函數(shù)節(jié)流？

簡單講就是讓一個函數(shù)無法在短時間內(nèi)連續(xù)調(diào)用，只有當(dāng)上一次函數(shù)執(zhí)行后過了規(guī)定的時間間隔，才能進行下一次該函數(shù)的調(diào)用?；蛘哒f你在操作的時候不會馬上執(zhí)行該函數(shù)，而是等你不操作的時候才會執(zhí)行。

函數(shù)截流的原理

通過使用定時器，在操作的時候讓函數(shù)延時執(zhí)行，如果在這個時間內(nèi)還在操作，則清除原來的定時器，再創(chuàng)建一個新的定時器執(zhí)行

方式一：

最簡單的操作方式，在操作的的時候清除上次的定時器，不操作的事后在執(zhí)行callBack回調(diào)

//封裝
／**
*  @  { Function} callBack    回調(diào)程序    
*／
function throttleFn(callBack){
    clearTimeout(method.timer);
    method.timer=setTimeout(()=>{
        method()
    },100)
}

//調(diào)用
window.onresize=function(){
    throttleFn(callBack)
}
方式二

優(yōu)勢在于把延遲時間當(dāng)做變量，而且使用閉包保護私有變量，缺點就是雖然使用apply把調(diào)用throttleFn時的this上下文傳給執(zhí)行函數(shù)，但畢竟不夠靈活

//封裝
／**
*  @  { Function} callBack    回調(diào)程序    
*  @  { Number } delay  延時時間
*  return  { Function }
*／
function thorttleFn(callBack,delay){
    var timer=null;
    return function(){
        var context=this;
        clearTimeout(timer);
        timer=setTimeout(()=>{
            callBack.apply(context,arguments)
        },delay)
    }
}

//調(diào)用
window.onresize=thorttleFn(myFunc,300)
方式三(個人認(rèn)為性能最優(yōu))

拓展深化函數(shù)節(jié)流

其實函數(shù)節(jié)流的出發(fā)點，就是讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調(diào)用來節(jié)流，減少性能消耗。當(dāng)你在操作resize和mousemove事件的時候，瀏覽器其實是有設(shè)置一個時間間隔，這個時間是多少我們不清楚，而且他們沒有提供參數(shù)去設(shè)置，所以需要我們在他們的基礎(chǔ)上再去做一些改變。真正的節(jié)流應(yīng)該是在可接受的范圍內(nèi)盡量延長這個調(diào)用時間，也就是我們自己控制這個執(zhí)行頻率，讓函數(shù)減少調(diào)用以達到減少計算、提升性能的目的。假如原來是16ms執(zhí)行一次，我們?nèi)绻l(fā)現(xiàn)resize時每50ms一次也可以接受，那肯定用50ms做時間間隔好一點。

／**
*  @  { Function} callBack 回調(diào)程序    
*  @  { Number } delay  延時時間
*  @  { Number }  intervalTime  間隔時間
*  return  { Function }
*／
function thorttleFn(callBack,delay,intervalTime){
    var timer=null;  // 定時器變量
    var time=0;  // 時間變量
    return function(){
        var context=this;
        var curTime=new Date();  // 當(dāng)前執(zhí)行的時間
        clearTimeout(timer);  //  清除上次的定時器
        
        if(!time){
            time=curTime;
        }
        // 當(dāng)前執(zhí)行時間距離上次執(zhí)行的時間是否大于等于間隔時間
        if(curTime - time >= intervalTime){
            time=curTime;
            callBack.apply(context,arguments)
        }else{
            timer=setTimeout(()=>{
                callBack.apply(context,arguments)
            },delay)
        }
    }
}

//調(diào)用
window.onresize=thorttleFn(myFunc,50,300)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94401.html

相關(guān)文章

  • JavaScript中函數(shù)節(jié)流的理解

    摘要：每次鼠標(biāo)移動都是這樣的處理過程，直到鼠標(biāo)不再移動一秒鐘后，定時器中的函數(shù)才被使用。 函數(shù)節(jié)流的原理 函數(shù)節(jié)流，就是對會頻繁觸發(fā)的函數(shù)事件做一些限制，讓這些函數(shù)可以在每隔一定的時間或者每次滿足一定的條件下再觸發(fā)。一般我們會給他起一個名字throttle。也就是節(jié)流的意思。一般這樣的函數(shù)有 resize事件、ontouchmove事件等。 舉個簡單的例子 測試函數(shù)節(jié)...

    taohonghui 評論0 收藏0

  • JS進階篇--JS函數(shù)節(jié)流（throttle）

    摘要：函數(shù)節(jié)流的原理函數(shù)節(jié)流的原理挺簡單的，估計大家都想到了，那就是定時器。在高級程序設(shè)計一書有介紹函數(shù)節(jié)流，里面封裝了這樣一個函數(shù)節(jié)流函數(shù)，它把定時器存為函數(shù)的一個屬性個人的世界觀不喜歡這種寫法。 什么是函數(shù)節(jié)流？ 介紹前，先說下背景。在前端開發(fā)中，有時會為頁面綁定resize事件，或者為一個頁面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個特點，就是用戶不必特地?fù)v亂...

    cpupro 評論0 收藏0

  • js中函數(shù)節(jié)流&函數(shù)去抖

    摘要：節(jié)流保證在一定時間內(nèi)，只能觸發(fā)一次。我們在嘗試一下去抖消抖，消除抖動，感覺這個更好聽有沒有什么現(xiàn)成的上的一次發(fā)現(xiàn)源碼的經(jīng)歷以及對學(xué)術(shù)界拿來主義的思考函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析函數(shù)去抖的實現(xiàn) 開篇先提幾個問題？ 1.做搜索框的時候你使用什么事件？change?blur?keyup？你想要的效果是什么？ 2.scroll事件怎么就觸發(fā)？是滾一段距離觸發(fā)一次？還是滾一圈觸發(fā)一次？還是滾...

    王軍 評論0 收藏0

  • 節(jié)流和防抖動

    摘要：起因面試被問到了節(jié)流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學(xué)起首先先看字面意思節(jié)流的意思就是水龍頭關(guān)小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發(fā)生形變的那一刻舉個例子節(jié)流在改變窗口大小 起因 面試被問到了節(jié)流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學(xué)起 首先, 先看字面意思:節(jié)流(throttl...

    hellowoody 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<