面试系列 - 什么是节流、防抖？

概念

节流：规定时间内，只触发一次函数。如果这个单位时间内触发多次函数，只生效一次（一般是执行第一次的触发）。

防抖：事件被触发 n 秒后再通过回调真正执行，如果在 n 秒内又被触发，则重新计时（一般是执行最后一次的触发）

实现方法

节流：throttle 函数

一般应用场景

1. 获取计算滚动条位置的场景（比如懒加载），使用节流限制获取频率
2. 用户点击提交按钮，使用节流防止重复请求（可以根据接口大致的返回时间决定节流时间，或者接口返回前限制再次点击）
3. 窗口大小改变、图片预览大小改变、鼠标移动位置计算等，也可以通过节流控制代码执行频率

// 定时器版本
function throttle(fn, delay) {
    let timer = null; // 通过闭包引用外界变量
    return function() {
        const args = arguments; // 保留全部参数
        if (!timer) {
            // 保证 this 指向不变以及依旧能接受到 e 参数
            fn.apply(this, args)
            timer = setTimeout(() => {
                timer = null
            }, delay)
        }
    }
}

// 时间戳版本
fuction throttle(func, delay = 0){
    let last = 0;
    return function() {
        const now = Date.now();
        const args = arguments
        if(now > (last + delay)){
            func.apply(this, args);
            last = now;
        }
    }
}

防抖：debounce 函数

一般应用

1. 输入框内可以使用防抖，在用户输入停止一段时间后再执行函数（如请求获取联想词）
2. 改变窗口大小或图片大小，等用户停止操作后再执行相关逻辑

function debounce(fn, delay){
    let timer = null;
    return function() {
        // 每次执行都清除一遍定时器，相当于重新计时
        clearTimeout(timer)
        const args = arguments
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}

参考

7分钟理解JS的节流、防抖及使用场景

流防抖的区别以及写法

听说前端面试手写”节流防抖“你不会？