js防抖与节流

个人理解

防抖是固定一个时间周期进行更新，而节流是像滑动窗口一样，虽然也是有时间周期，但是每次数据有变化时时间周期计算会更新
例：联想输入框

防抖：当用户输入时，只有过了五秒才会再次更新联想
节流：当用户输入时，也是五秒，不过每一次输入都会更新时间当起点，重新计时

防抖（debounce）

以用户拖拽改变窗口大小，触发resize事件为例，在这过程中窗口的大小一直在改变，所以如果我们在resize事件中绑定函数，这个函数将会一直触发，而这种情况大多数情况下是无意义的，还会造成资源的大量浪费。

这时候可以使用函数防抖来优化相关操作：

// 普通方案
window.addEventListener('resize', () => {
  console.log('trigger');
})

优化方案

// debounce 函数接受一个函数和延迟执行的时间作为参数
function debounce(fn, delay){
    // 维护一个 timer
    let timer = null;

    return function() {
        // 获取函数的作用域和变量
        let context = this;
        let args = arguments;

        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args);
        }, delay)
    }
}

function foo() {
  console.log('trigger');
}

// 在 debounce 中包装我们的函数，过 2 秒触发一次
window.addEventListener('resize', debounce(foo, 2000));

在resize事件上绑定处理函数，这时debounce函数会立即调用，实际上绑定的函数时debounce函数内部返回的函数。
每一次事件被触发，都会清除当前的timer然后重新设置超时调用。
只有在最后一次触发事件，才能在delay时间后执行。

我们也可以为 debounce 函数加一个参数，可以选择是否立即执行函数

function debounce(func, delay, immediate){
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        if(timer) clearTimeout(timer);
        if(immediate){
            var doNow = !timer;
            timer = setTimeout(function(){
                timer = null;
            },delay);
            if(doNow){
                func.apply(context,args);
            }
        }else{
            timer = setTimeout(function(){
                func.apply(context,args);
            },delay);
        }
    }
}

节流（throttle）

应用场景如：输入框的联想，可以限定用户在输入时，只在每两秒钟响应一次联想。

可通过时间戳和定时器来实现。

var throttle = function(func, delay){
    var prev = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}

定时器实现

var throttle = function(func, delay){
    var timer = null;

    return function(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context, args);
                timer = null;
            },delay);
        }
    }
}

区别在于，使用时间戳实现的节流函数会在第一次触发事件时立即执行，以后每过 delay 秒之后才执行一次，并且最后一次触发事件不会被执行；而定时器实现的节流函数在第一次触发时不会执行，而是在 delay 秒之后才执行，当最后一次停止触发后，还会再执行一次函数。

Bill

js防抖与节流

个人理解

防抖（debounce）

节流（throttle）