防抖函数与节流函数的区别

防抖函数的作用

防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着N秒内函数只会被执行一次，如果N秒内再次被触发，则重新计算延迟时间。

防抖函数实现

1. 事件第一次触发时，timer是null，调用later()，若immediate为true，那么立即调用func.apply(this, params)；如果immediate为false，那么wait之后，调用func.apply(this, params)
2. 事件第二次触发时，如果timer已经重置为null(即setTimeout的倒计时结束)，那么流程与第一次触发时一样，若timer不为null(即setTimeout的倒计时未结束)，那么清空定时器，重新开始计时。

function debounce(func,wait,immediate = true){

    let timeout,result;
    //延迟执行函数
    const later = (context,args) => setTimeout(()=>{
        timeout = null;//倒计时结束
        if(!immediate){
            //执行回调
            result = func.apply(context,args);
            context = args = null;
        }
    },wait);

    let debounced = function(...params){
        if(!timeout){
            timeout = later(this,params);
            if(immediate){
                //立即执行
                result = func.apply(this,params);
            }
        }else{
            clearTimeout(timeout);
            //函数在每个等待时延的结束被调用
            timeout = later(this,params);
        }

        return result;
    };

    //提供在外部清空定时器的方法
    debounce.cancel = function(){
        clearTimeout(timeout);
        timeout = null;
    };

    return debounced;

}

immediate为true时，表示函数在每个等待时延的开始被调用。immediate为false时，表示函数在每个等待时延的结束被调用。

防抖的应用场景

• 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
• 表单验证
• 按钮提交事件。
• 浏览器窗口缩放，resize事件(如窗口停止改变大小之后重新计算布局)等。

 

节流函数的作用

节流函数的作用是规定一个单位时间，在这个单位时间内最多只能触发一次函数执行，如果这个单位时间内多次触发函数，只能有一次生效。

节流函数实现

移动js节流函数。