防抖与节流方法

防抖

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

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)

节流

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

• 方法一

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);

总结

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