js 实现防抖、节流

防抖
触发高频事件后 n 秒后函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间;

 function debounce(func, wait) {
    
    
            let timer = null;

            return function () {
    
    
                if (timer) {
    
    
                    clearTimeout(timer);
                    timer = null;
                }

                let self = this;
                let args = arguments;

                timer = setTimeout(function () {
    
    
                    func.apply(self, args);
                    timer = null;
                }, wait);
            };
        }

节流
高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率

function throttle(func, wait) {
    
    
            let lastTime = 0;
            let timer = null;

            return function () {
    
    
                if (timer) {
    
    
                    clearTimeout(timer);
                    timer = null;
                }

                let self = this;
                let args = arguments;
                let nowTime = +new Date();

                const remainWaitTime = wait - (nowTime - lastTime);

                if (remainWaitTime <= 0) {
    
    
                    lastTime = nowTime;
                    func.apply(self, args);
                } else {
    
    
                    timer = setTimeout(function () {
    
    
                        lastTime = +new Date();
                        func.apply(self, args);
                        timer = null;
                    }, remainWaitTime);
                }
            };
        }

猜你喜欢

转载自blog.csdn.net/weixin_43989656/article/details/129683369