微信小程序節流的使用

節流：在《高程》上定義，某些代碼不可以在沒有間斷的情況連續重復執行。第一次調用函數,創建一個定時器,在指定的時間間隔之后運行代碼。當第二次調用該函數時,它會清除前一次的定時器

           並設置另一個.

節流的目的：只有在執行函數請求的一段時間之后才執行.

我的理解：在規定時間內只觸發一次.

例子：滑動滾動條觸發分頁時,不可能時時刻刻只要一分頁就觸發ajax,這樣對服務器很不友好.

 

1.0版本節流：

 

    var processor = {
        timeoutId = null,
        //實際處理的代碼
        performProcessing:function(){
          //寫業務邏輯
        },

        //正在的節流重點
        process:function(){
            //清除上一個計時器,來阻止之前的調用被執行
           clearTimeout(timeoutId);
           //創建一個新的計時器調用
           this.timeoutId = setTimeout(()=>{
               this.performProcessing();
           },100)
        },
    }

    processor.process()
    //表示100ms之內只執行了一次performProcessing()方法
    //即使100ms內 調用了50次process方法,performProcessing也只會執行一次

 

 

 

 

 

2.0版本節流:(面試要求手寫的節流基本都是這個)

 function throttle(method,context){ 
        clearTimeout(method.tId);
        method.tId = setTimeout(function(){
            //確保定時器在適當的環境中執行
           method.call(context)
        },100)
    }

    //method:要執行的函數  context:在哪個作用域上執行

 

 

3.0版本節流:(有手就行 直接用)

    //我借鑒(偷了)了下掘金大佬的代碼

    //本質上就是在規定時間差內 不能再觸發,有種簡單的方法就是根據Date來計算就好了,而不用到計時器

const throttle = (fn,delay)=>{
        let oldDate = Date.now();
        return function(){
            let args = arguments;
            let newDate = Date.now();
            let that = this;
            if(newDate-oldDate>delay){
                fn.apply(that,args);
                //倘若時間差大於延長時間 就更新一次舊時間
                oldDate = Date.now();
            }
        }
    }

 

如何使用

                       在小程序的until.js或其他js文件上定義節流方法

                        

 

                       

 

 然后在需要使用的地方

                                 

 

 即可

 

先知道怎么用,再去理解原理是什么。

如果幫助了小伙伴們的話 點個贊哦~