防抖与节流方法

1.  防抖

防抖是当某一个时间段内多次触发同一事件时，只执行最后一次触发的事件。其余的事件都会被清除。

function debounce(f, m) {        
    let time;
    return function(){
        let arg = Array.prototype.slice.call(arguments, 1);
        if(time) {
            clearTimeout(time);
        }
        time = setTimeout(function(){
            f.apply(this, arg);
        },m) 
    }
}

// 测试
function fun(){
    console.log("防抖");
}
let test = debounce(fun, 1000);
window.addEventListener('scroll', test)

2. 节流

节流是在某一个时间段内事件只能被触发一次并执行，如果想再次触发执行需等待下一个时间周期。

方法一

function throttle(f, m) {
    let status = true;
    return function(){
        let arg = Array.prototype.slice.call(arguments, 1);
        if(!status) return ;
        status = false;
        setTimeout(function(){
            f.apply(this, arg);
            status = true;
        }, m)
    }
}

// 测试
function fun(){
    console.log("防抖");
}
let test =  throttle(fun, 1000);
window.addEventListener('scroll', test);

方法二

function throttle(f, m) {
    let lastTime = 0;
    return function () {
        let arg = Array.prototype.slice.call(arguments, 1);
        let newTime = Date.now();
        console.log(newTime - lastTime);
        if (newTime - lastTime > m) {
          setTimeout(function () {
            f.apply(this, arg);
          }, m);
        }
        lastTime = newTime;
      };
}

// 测试
function fun(){
    console.log("防抖");
}
let test = throttle(fun, 1000);
window.addEventListener('scroll', test);

3.   总结

• 防抖只执行最后一次触发的事件
• 节流只执行时间周期内第一次触发的事件
• 防抖在时间段内触发多次函数事件，但会被清除只保留最后一次，并执行
• 节流在时间段内只能触发执行一次事件，如果想再次触发执行将等到下一个时间周期