国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

twohappy / 2992人閱讀

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

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

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

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

函數(shù)截流的原理

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

方式一：

最簡(jiǎn)單的操作方式，在操作的的時(shí)候清除上次的定時(shí)器，不操作的事后在執(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)勢(shì)在于把延遲時(shí)間當(dāng)做變量，而且使用閉包保護(hù)私有變量，缺點(diǎn)就是雖然使用apply把調(diào)用throttleFn時(shí)的this上下文傳給執(zhí)行函數(shù)，但畢竟不夠靈活

//封裝
／**
*  @  { Function} callBack    回調(diào)程序    
*  @  { Number } delay  延時(shí)時(shí)間
*  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)
方式三(個(gè)人認(rèn)為性能最優(yōu))

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

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

／**
*  @  { Function} callBack 回調(diào)程序    
*  @  { Number } delay  延時(shí)時(shí)間
*  @  { Number }  intervalTime  間隔時(shí)間
*  return  { Function }
*／
function thorttleFn(callBack,delay,intervalTime){
    var timer=null;  // 定時(shí)器變量
    var time=0;  // 時(shí)間變量
    return function(){
        var context=this;
        var curTime=new Date();  // 當(dāng)前執(zhí)行的時(shí)間
        clearTimeout(timer);  //  清除上次的定時(shí)器
        
        if(!time){
            time=curTime;
        }
        // 當(dāng)前執(zhí)行時(shí)間距離上次執(zhí)行的時(shí)間是否大于等于間隔時(shí)間
        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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/94401.html

相關(guān)文章

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

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

    taohonghui 評(píng)論0 收藏0

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

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

    cpupro 評(píng)論0 收藏0

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

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

    王軍 評(píng)論0 收藏0

  • 節(jié)流和防抖動(dòng)

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

    hellowoody 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<