節流函數怎么寫？

twohappy 發布于2019-08-22 16:29 / 2981人閱讀

摘要：真正的節流應該是在可接受的范圍內盡量延長這個調用時間，也就是我們自己控制這個執行頻率，讓函數減少調用以達到減少計算提升性能的目的。

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

什么是函數節流？

簡單講就是讓一個函數無法在短時間內連續調用，只有當上一次函數執行后過了規定的時間間隔，才能進行下一次該函數的調用。或者說你在操作的時候不會馬上執行該函數，而是等你不操作的時候才會執行。

函數截流的原理

通過使用定時器，在操作的時候讓函數延時執行，如果在這個時間內還在操作，則清除原來的定時器，再創建一個新的定時器執行

方式一：

最簡單的操作方式，在操作的的時候清除上次的定時器，不操作的事后在執行callBack回調

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

//調用
window.onresize=function(){
    throttleFn(callBack)
}

方式二

優勢在于把延遲時間當做變量，而且使用閉包保護私有變量，缺點就是雖然使用apply把調用throttleFn時的this上下文傳給執行函數，但畢竟不夠靈活

//封裝
／**
*  @  { Function} callBack    回調程序    
*  @  { 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)
    }
}

//調用
window.onresize=thorttleFn(myFunc,300)

方式三(個人認為性能最優)

拓展深化函數節流

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

／**
*  @  { Function} callBack 回調程序    
*  @  { 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();  // 當前執行的時間
        clearTimeout(timer);  //  清除上次的定時器
        
        if(!time){
            time=curTime;
        }
        // 當前執行時間距離上次執行的時間是否大于等于間隔時間
        if(curTime - time >= intervalTime){
            time=curTime;
            callBack.apply(context,arguments)
        }else{
            timer=setTimeout(()=>{
                callBack.apply(context,arguments)
            },delay)
        }
    }
}

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

GPU云服務器云服務器函數節流 js函數節流 php寫回調函數匯編寫c語言函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94401.html

JavaScript中函數節流的理解

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

taohonghui 2019-08-19 17:56 評論0 收藏0
JS進階篇--JS函數節流（throttle）

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

cpupro 2019-08-20 16:41 評論0 收藏0
js中函數節流&函數去抖

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

王軍 2019-08-22 10:42 評論0 收藏0
節流和防抖動

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

hellowoody 2019-08-22 15:41 評論0 收藏0