JavaScript手撕代码 —— 实现防抖、节流函数

😃😃😃 本人能力有限，欢迎大佬指正改进~

1. 防抖函数（debounce）

防抖函数功能：

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

比如一个搜索框，应用防抖函数后，当用户不断输入内容时，不会发送请求。只有当用户一段时间T内不输入内容了，才会发送一次请求。如果小于这段时间T继续输入内容的话，就会重新计算时间T，也不会发送请求。这样降低了发送请求的次数，提高性能的同时也提升了用户体验。

实现防抖函数：

// func是用户传入需要防抖的函数
// wait是等待时间，若不传参，默认50ms
// 因为闭包，timer将一直在内存中
const debounce = (func, wait = 50) => {
    // 缓存一个定时器
    let timer = null;
    // 返回的函数是每次用户实际调用的防抖函数
    return (...args) => {
        // 如果已经设定过定时器了就清空上一次的定时器
        if (timer) clearTimeout(timer);
        // 开始一个新的定时器，延迟执行用户传入的方法
        timer = setTimeout(() => {
            func.apply(this, args);
        }, wait);
    };
};

实现效果：

上方输入框，下方显示区，不断输入内容时，下方显示区不会更新。只有在1s内不输入内容了，下方显示区才会更新内容。

2. 节流函数（throttle）

节流函数功能：

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

实现节流函数：

// func是用户传入需要防抖的函数
// wait是等待时间，若不传参，默认50ms
// 因为闭包，flag将一直在内存中
const throttle = (func, wait = 50) => {
    // 定义flag，初始为true
    let flag = true;
    // 返回的函数是每次用户实际调用的节流函数
    return (...args) => {
        if (flag) {
            // 如果flag为true，则执行定时器
            setTimeout(() => {
                func.apply(this, args);
                // 函数执行完毕后，将flag改回true
                // 以便下次再执行
                flag = true;
            }, wait);
        }
        // 因为定时器是异步任务，定时器执行后，立刻将flag关闭
        // 在等待延时时间时，阀门始终关闭，不会一直执行函数
        flag = false;
    };
};

实现效果：

上方输入框，下方显示区。不断输入内容时，每隔500ms，下方显示区才会更新一次内容。