節流與防抖初識

基於防抖和節流的性能優化

當下網頁中的交互越來越多，很多高頻時間帶來的性能問題，是一個繞不過去的坎。優化這些高頻事件，防抖與節流必不可少。

防抖函數與節流函數

• 防抖：就是指觸發事件後在n秒內函數只能執行一次，如果在n秒內又觸發了事件，則會重新計算函數執行時間。
• 節流：就是指連續觸發事件但是在一段時間中只執行一次函數
• css重繪
• css迴流

debounce(防抖)

防抖分爲立即防抖和非立即防抖

非立即防抖：觸發事件後函數不會立即執行，而是在n秒之後執行，如果n秒之內又觸發了事件，則會重新計算函數執行時間。
立即防抖：觸發事件後會立即執行，然後n秒內不觸發事件纔會執行函數的效果

這是一個防抖代碼

    function debounce(fn, wait) {   // 防抖
        let timmer = null ;
        return function(){
            var args = arguments; 
            var now = !timmer;
            timmer &&  clearTimeout(timmer) // 當timmer存在清除
            timeer = setTimeout(()=>{
                // fn.apply(this,args); 
                timmer = null;
            },wait) ;
            if(now){
                fn.apply(this,args);
            }
        }
    }

throttle(節流)

節流分爲時間戳和定時版本

時間戳版節流

    function jl(fn,wait){
        let last = 0
        return function(){
            var args = arguments;
            var now =  Date.now()
            if(now - last > wait){
                fn.apply(this,args)
                last = now;
            }
        }
    }