zl程序教程

您现在的位置是:首页 >  后端

当前栏目

通过原生js实现一个节流函数和防抖函数?

JS 实现 函数 一个 通过 原生 节流 防抖
2023-09-14 09:13:49 时间

防抖函数(debounce)

功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
比如一个输入框,当应用实现防抖函数之后,用户不断输入内容时,函数会一直被触发,则不会发送请求。只有当用户在一段规定时间N内未进行输入操作,才会发送一次请求。如果在N秒内间断的输入内容,且间断的时间小于规定时间N时,则会重新计时且不会发送请求。
这样降低了发送请求的次数,提高性能的同时也提升了用户体验。

手写实现防抖函数

// 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);
    };
};

节流函数(throttle)

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

实现节流函数

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