防抖和节流

311 阅读2分钟

1. 手写防抖函数(debounce)

防抖函数功能

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

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

实现防抖函数

// func是用户传入需要防抖的函数
// wait是等待时间,若不传参,默认50ms
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
const throttle = (func, wait = 50) => {
    // 上一次执行该函数的时间
    let lastTime = 0;
    // 返回的函数是每次用户实际调用的节流函数
    return (...args) => {
        // 获取当前时间,并转化为number
        let now = +new Date();
        // 将当前时间和上一次执行函数时间对比
        // 如果差值大于设置的等待时间就执行函数
        if (now - lastTime > wait) {
            // 重置上一次执行该函数的时间
            lastTime = now;
            func.apply(this, args);
        }
    };
};

实现效果

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