防抖和节流

防抖和节流的概念

防抖

含义:持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
使用场景:
1.可以给按钮添加防抖函数以防止ajax请求多次提交
2.判断scroll是否滑到底部，滚动事件 + 防抖函数

function debounce(fn,wait){
    var timer = null;
    return function(){
        if(timer !== null){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,wait);
    }
}
    
function handle(){
    console.log(Math.random());
}
    
window.addEventListener("scroll",debounce(handle,1000));

上述就是一个简单的防抖函数,持续触发scroll事件,事件处理函数handle只在滚动结束后1000毫秒后触发,也就是说在持续触发scroll的时候,事件函数handle一直没有执行

总结:触发事件后函数不会立即执行，而是在 n 秒后执行，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 而 “非立即执行版” 指的是 触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果

节流

含义:在持续触发事件时间内,只调用一次事件处理函数

var throttle = function (func, delay) {
            var timer = null;
            var startTime = Date.now();
            return function () {
                var curTime = Date.now();
                var remaining = delay - (curTime - startTime);
                var context = this;
                var args = arguments;
                clearTimeout(timer);
                if (remaining <= 0) {
                    func.apply(context, args);
                    startTime = Date.now();
                } else {
                    timer = setTimeout(func, remaining);
                }
            }
        }

        function handle() {
            console.log(Math.random());
        }
        window.addEventListener('scroll', throttle(handle, 1000));

持续滚动时,不会触发多次事件处理函数,这点和防抖很类似,在滚动结束后,会执行一次你在持续滚动中发生的一次事件,只是并不会执行多次

防抖和节流的区别

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。