防抖和节流

Posted 2020-12-08 sloanlv

在开发中我们经常需要绑定一些持续触发的事件，如： resize、scroll、mousemove等等，但是我们并不希望在事件触动的过程中去频繁的执行绑定的函数，在这种情况下我们一般有两种解决办法，就是防抖和节流。

防抖

是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

// 防抖
    function debounce(func, wait) {
        let timeout;
        return function() {
            let context = this;
            let args = arguments;
            if (timeout) {
                clearTimeout(timeout);
            }
            timeout = setTimeout(function () {
                func.apply(context,args);
            },wait);
        };
    };
    /*使用*/
    window.onscroll = debounce(function () {
        console.log(‘debounce‘);
    }, 1000);

 

节流

是指连续触发事件但是在 n 秒中只执行一次函数。

function throttle(func, delay) {
        let prevTime = Date.now();
        return function() {
            let curTime = Date.now();
            if (curTime - prevTime > delay) {
                func.apply(this, arguments);
                prevTime = curTime;
            }
        };
    };
    /*使用*/
    window.onscroll = throttle(function () {
        console.log(‘throttle‘);
    }, 1000);

 

区别：防抖是在练连续事件完全触发完成之后，只调用一次。节流是在一定时间内只执行一次。