1. 程式人生 > 實用技巧 >typescript寫防抖節流

typescript寫防抖節流

注意:在javascript 中,我們一般直接使用函式利用閉包封裝,這裡會涉及this ,在typescript 中如果還是用函式寫,this就會受到限制,無法通過編譯的,所以可以使用class解決

防抖:在規定時間內重複操作一個事件只會執行一次,在時間段內會重新計算執行開始時間,常用與滾動事件,操作請求後臺介面(防止頻繁操作)

節流:連續觸發事件,n秒內只執行一次,節流會降低執行函式頻率,可以用在併發的操作

 1 export class Debounced {
 2 
 3     /**
 4      * 
 5      * @param fn 要執行的函式
 6      * @param awit  時間
7 * @param immediate 是否在觸發事件後 在時間段n開始,立即執行,否則是時間段n結束,才執行 8 */ 9 static use(fn:Function,awit:number=1000,immediate:boolean=false){ 10 let timer:NodeJS.Timeout|null 11 return (...args:any)=>{ 12 if(timer) clearInterval(timer) 13 if(immediate){ 14 if
(!timer) fn.apply(this,args); 15 timer = setTimeout(function(){//n 秒內 多次觸發事件,重新計算.timeer 16 timer = null;//n 秒內沒有觸發事件 timeer 設定為null,保證了n 秒後能重新觸發事件 flag = true = !timmer 17 },awit) 18 }else{ 19 timer = setTimeout(()=>{ fn.apply(this
,args)},awit) 20 } 21 } 22 } 23 24 }

export class Throttle{
    /**
     * 
     * @param fn 
     * @param awit 
     * @param immediate true 是啟用時間戳版,false 是啟用定時器版,作用一樣
     */
    static use(fn:Function,awit:number=1000,immediate:boolean=true){
        //時間戳
        if(immediate){
            let prevTime = 0;
            return (...args:any)=>{
                let nowTime = Date.now();
                if(nowTime-prevTime>=awit){
                    fn.apply(this,args)
                    prevTime=nowTime
                }
            }
        }else{
            //定時器
            let timer: NodeJS.Timeout|null;
            return (...args:any)=>{
                if(!timer){
                    fn.apply(this,args)
                    timer = setTimeout(() => {
                        timer&&clearTimeout(timer)
                        timer= null
                    }, awit);
                }
               
            }
        }

        
    }
    

}