防抖和节流

最新推荐文章于 2024-06-07 09:18:52 发布

Mr不懂

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量118

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/MrGuange_/article/details/126140860

版权

防抖

无论用户触发多少次事件，对应的回调函数只会在事件停止触发指定事件后执行。（即：回调函数在事件停止触发指定时间后被调用）

function debounce(fn, wait = 1000) {
    let timer = null;
    return function() {
        let that = this;
        let args = arguments;
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            timer = null;
            fn.call(that, ...args);
        }, wait);
    }
}

节流

无论用户触发事件多少次，附加的函数在给定的时间间隔内只会执行一次。（即：回调函数在规定时间内最多执行一次）

function throttle(fn, wait = 1000) {
    let timer = null;
    let last = 0;
    return function() {
        let that = this;
        let args = arguments;
        let now = Date.now();
        if(last && now - last < wait) {
            clearTimeout(timer);
            timer = setTimeout(() => {
                last = now;
                fn.call(that, ...args);
            }, wait);
        } else {
            last = now;
            fn.call(that, ...args);
        }
    }
}