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

2019-07-1246次阅读javascript

防抖函数的作用

防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着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节流函数

上一篇: CSS选择器链或组中出现无效的伪选择器会怎样  下一篇: JavaScript函数闭包  

防抖函数与节流函数的区别相关文章