防抖和节流

前言

防抖与节流函数是一种最常用的 高频触发优化方式，能对性能有较大的帮助。

正文

• 防抖 (debounce): 将多次高频操作优化为只在最后一次执行，通常使用的场景是：用户输入，只需再输入完成后做一次输入校验即可。

简单防抖函数

 <button class="button"value="点"  type="button" name="button" >fdas</button>


let obutton = document.querySelector('.button')

obutton.addEventListener('click',debounce( ()=>{
    console.log('aaa');
  },1000),false)

function debounce(func, wait) {
    let timer = null;
    return function(...params) {
        // 如果定时器存在则清除
        if(timer){
            clearTimeout(timer);
        }
        // 重新开始定时执行
        timer = setTimeout(() => {
            func.apply(this, params);
        }, wait);
    }
}

快速点击button只会弹出一个aaa

缺点：只能在最后执行，不能立即被执行，在某些情况下不适用。
改进：

let obutton = document.querySelector('.button')

obutton.addEventListener('click',debounce( ()=>{
    console.log('aaa');
  },1000,true),false)
  
function debounce(func, wait, immediate) {
    
    let timer, context, args;
    
    // 定时器
    let later = function() {
        return setTimeout(() => {
            timer = null;
            if(!immediate) {
                func.apply(context, args);
            }
        }, wait);
    }
    
    return function(...params) {
        if(!timer) {
            timer = later();
            
            // immediate 为 true，则立即执行
            // 否则 缓存上下文 和 参数
            if(immediate) {
                func.apply(this, params);
            } else {
                context = this;
                args = params;
            }
        } else {
            clearTimeout(timer);
            timer = later();
        }           
    }
}

通过设置 immediate true或false来决定是否立即执行

• 节流(throttle): 每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作，通常使用场景: 滚动条事件 或者 resize 事件，通常每隔 100~500 ms执行一次即可。

<button class="button"value="点"  type="button" name="button" >fdas</button>

let obutton = document.querySelector('.button')

obutton.addEventListener('click',throttle( ()=>{
    console.log('aaa');
  },1000,true),false)
  
function throttle(fn, wait, immediate) {
    let timer = null
    let callNow = true
    
    return function() {
        let context = this,
            args = arguments

        if (callNow) {
            fn.apply(context, args)
            callNow = false
        }

        if (!timer) {
            timer = setTimeout(() => {
                fn.apply(context, args)
                timer = null
            }, wait)
        }
    }
}

设置wait来调节每次执行的间隔，第一次是立即执行。