函数防抖与函数节流

函数防抖(debounce)

概念: 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。

对于函数防抖,有以下几种应用场景:

1.给按钮加函数防抖防止表单多次提交。

2.对于输入框连续输入进行AJAX验证时,用函数防抖能有效减少请求次数。

3.判断 scroll 是否滑到底部, 滚动事件 + 函数防抖

总的来说,适合多次事件 一次响应 的情况。

实现:

function _debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}

function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500)

函数节流(throttle)

概念: 规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

对于函数节流,有如下几个场景:

1.游戏中的刷新率

2.DOM元素拖拽

3.Canvas画笔功能

总的来说,适合 大量事件 按时间做 平均 分配触发。

实现:

function _throttle(fn,wait,time){
    var previous = null; //记录上一次运行的时间
    var timer = null;

    return function(){
        var now = new Date();
        if(!previous) {
            previous = now;
        }
        //当上一次执行的时间与当前的时间差大于设置的
           执行间隔时长,就主动执行一次
        if(now - previous > time){
            clearTimeout(timer);
            fn();
            previous = now;
            // 执行函数后,马上记录当前时间
        }else{
            clearTimeout(timer);
            timer = setTimeout(function(){
                fn();
            },wait);
        }
    }
}
function _log(){
    console.log(1)
}
window.onscroll = _debounce(_log,500,2000)
  //2000毫秒内最多只能执行一次

这两个方法均是为了优化高频率执行js代码、通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段,并没有实质上减少绑定事件的触发次数,但在时间轴上控制了回调函数的执行次数。

发表评论

电子邮件地址不会被公开。 必填项已用*标注