关于javascript:防抖与节流方法

防抖

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

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

总结

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