函数防抖与函数节流

一、函数防抖

定义

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

应用场景

在实现根据用户输入实时搜索时，我们可以给搜索方法加个防抖，即在用户持续输入过程中，防抖函数起作用，不会向后台频繁发请求，只有用户中断输入（关键词输入完毕）再进行搜索

代码实现

function debounce(func,time=17,options={
    leading:true,  //是否在开始时即触发
    context:null   //要绑定的上下文
}){
    let timer;
    const _debounce = (...args)=>{
        if(timer) clearTimeout(timer);
        //第一次需要触发时
        if(options.leading && !timer){
            timer = setTimeout(null);
            func.apply(options.context,args);
        }else{
            timer = setTimeout(()=>{
                func.apply(options.context,args);
                timer = null;
            },time);
        }
    }

    //增加一个主动取消的方法
    _debounce.cancel = () => {
        clearTimeout(timer);
        timer = null;
    }
    return _debounce
}

二、函数节流

定义

当持续触发事件时，保证一定时间段内只调用一次事件处理函数

应用场景

处理scroll事件时，由于触发频率过高，会影响性能，此时可以使用节流函数，在一定时间内只触发一次

代码实现

function throttle(func,time=17,options={
    leading:true,
    trailing:false,
    context:null
}){
    let timer;
    let previous = new Date().getTime();
    const _throttle = (...args) => {
        const now = new Date().getTime();
        if(!options.leading){
            if(timer) return;
            timer = setTimeout(()=>{
                func.apply(options.context,args);
                timer = null;
            },time);
        }else if(now - previous > time){
            func.apply(options.context,args);
            previous = now;
        }else if(options.trailing){
            clearTimeout(timer);
            timer = setTimeout(()=>{
                func.apply(options.context,args);
            },time);
        }
    }

    _throttle.cancel = () => {
        previous = 0;
        clearTimeout(timer);
        timer = null;
    }
    return _throttle;
}