防抖函数

debounce指的是某个函数在某段时间内，无论触发多少次回调都只执行最后一次，如：设置一个等待3秒的函数，3秒内如果遇到该函数再次被调用，就重新计时，直到3秒内没有该函数调用，此时才执行函数；

// 方法一
function debounce(fun, delay) {

    // 如果想在第一次绑定事件就触发fun 可加一下代码，参数上添加是否第一次加载的参数判断
    if(isFirst && !fun.timeoutId){
        fun();
    }

    return function() {
        clearTimeout(fun.timeoutId);
        fun.timeoutId = setTimeout(function() {
            fun();
        }, delay);
    };
}
var betterFn = debounce(() => {
    console.log("fn 防抖执行了");
}, 1000);
document.addEventListener("scroll", betterFn);

函数节流

指某个函数在一定时间间隔内只执行一次，如3秒只能执行一次，当3秒过后才会执行新的函数调用

// 方法一，设置闭包timer变量，根据判断是否可以重新执行函数
function debounce(fun, delay) {
    var timer = true;
    return function() {
        if(timer){
            fun();
            timer = false;     
            setTimeout(function(){
                timer = true;
            },delay);   
        }
    };
}
var betterFn = debounce(() => {
    console.log("fn 节流执行了");
}, 2000);
document.addEventListener("scroll", betterFn);

// 方法二，利用时间戳来判断是非已到执行时间，记录上次执行的时间戳

function debounce(fun, delay) {
    var timer = new Date();
    return function() {
        if(new Date() - timer > delay){
            fun();
            timer = new Date()
        }
    };
}
var betterFn = debounce(() => {
    console.log("fn 节流执行了");
}, 2000);
document.addEventListener("scroll", betterFn);