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

目录

前言

一、函数防抖(debounce)

二、函数节流(throttle)

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

1、相同点

2、不同点

四、函数防抖与节流的常用场景

1、函数防抖的常见应用场景（连续的事件，只需触发最后一次回调）：

2、函数节流的常用场景（间隔一段时间执行一次回调）

---

前言

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

 

一、函数防抖(debounce)

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

举个栗子：

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

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

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

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

function shakeProof(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 = shakeProof(f, 1000);// 将函数 f 变为防抖函数

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

 

二、函数节流(throttle)

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

函数节流的实现方案有 2 种：

• 使用定时器实现函数节流：可通过使用定时器，在操作的时候让函数延时执行，如果在这个时间内还在操作，则清除原来的定时器，再创建一个新的定时器执行。
• 使用时间戳实现函数节流：用时间戳来判断是否已到执行时间，记录上次执行的时间戳，然后每次触发事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经达到时间差（Xms），如果是则执行，并更新上次执行的时间戳，如此循环。

分别举个栗子：

案例一：使用定时器实现函数节流

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

// 应用实例
function f(e, content) {
    console.log([e, content]);
}
var testFn = throttle(f, 1000); // 节流函数
document.onmousemove = function (e) {
    testFn(e, 'test'); // 给节流函数传参
}

案例二：使用时间戳实现函数节流

function throttle(fn, delay) {
    var previous = 0;
    // 使用闭包返回一个函数并且用到闭包函数外面的变量previous
    return function() {
        var _this = this;
        var args = arguments;
        var now = new Date();
        if(now - previous > delay) {
            fn.apply(_this, args);
            previous = now;
        }
    }
}

// 应用实例
function f(e, content) {
    console.log([e, content]);
}
var testFn = throttle(f, 1000); // 节流函数
document.onmousemove = function (e) {
    testFn(e, 'test'); // 给节流函数传参
}

 

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

1、相同点

• 都可以通过使用 setTimeout 实现。
• 目的都是，降低回调执行频率。节省计算资源。

2、不同点

• 函数防抖，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现；
  函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
• 函数防抖，关注一定时间连续触发，只在最后执行一次；
  函数节流，侧重于一段时间内只执行一次。

 

四、函数防抖与节流的常用场景

1、函数防抖的常见应用场景（连续的事件，只需触发最后一次回调）：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求。
• 手机号、邮箱验证输入检测。
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
• 滚动加载。

2、函数节流的常用场景（间隔一段时间执行一次回调）

• 滚动加载，加载更多或滚到底部监听。
• 谷歌搜索框，搜索联想功能。
• 高频点击提交，表单重复提交。