js 函数防抖(debounce)与节流(throttle)

目录

前言

一、函数防抖(debounce)——多次触发只执行最后一次

二、函数节流(throttle)——规定时间内只触发一次

1、使用定时器实现函数节流

2、使用时间戳实现函数节流

三、函数防抖与节流的比较

1、相同点

2、不同点

四、防抖与节流的应用场景

1、防抖的应用场景

2、节流的应用场景

---

前言

函数防抖和函数节流：都是用来优化高频率执行的 JavaScript 代码的方法。

函数防抖（debounce）：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

函数节流（throttle）：每隔一段时间，只执行一次函数。

一、函数防抖(debounce)——多次触发只执行最后一次

函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

举个栗子：

var timer;
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function(){
        fn();
    }, delay);
}

// 应用实例
function f(){
    console.log('test');
}
document.onmousemove = () => {
    debounce(f, 1000);
}

上面例子中，在document中鼠标移动的时候，会在最后一次触发onmousemove事件后的1秒之后，执行回调函数f。但这种写法存在弊端：只能在setTimeout的父级作用域中声明 timer 才能保证是同一个timer。

使用闭包优化上面的代码：

function debounce(fn, time){
    var timer;
    return function(){
        var _this = this;
        var args = arguments;
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(function(){
            fn.apply(_this, args);// 用 apply 指向调用 shakeProof 方法的对象，相当于 _this.fn(args);
        }, time);
    }
}

// 应用实例
function f(event, content){
    console.log([event, content]);
}
var testFn = debounce(f, 1000);// 将函数 f 变为防抖函数

document.onmousemove = function (e) {
    var e = e || window.event;
    testFn(e, 'test'); // 给防抖函数传参
}

采用 ES6 语法优化上述防抖代码：

export const debounce = (fn, delay) => {
    let timer = null;
    let that = this;
    return (...args) => {
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(that, args);
        }, delay);
    }
}

【注意】

• 这里使用了 ES6 的箭头函数来做闭