【js小知识】轻松了解js防抖与节流

js的防抖和节流是前端面试经常会问到的知识点，今天结合moba类游戏来解释一下。

1.防抖：

持续触发不执行，不触发的一段时间后执行。就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

就像王者中的回城一样，每次回城都需要一段时间的读条，读完条之后才执行回城这个操作。若在读条的时候再次触发回城，那么读条会被打断并且重新开始读条。这就是防抖。

实际应用：

//如下，持续触发 scroll 事件时，并不执行 handle 函数，当 1000 毫秒内没有触发 scroll 事件时，才会延时触发 scroll 事件
function debounce(fn, wait) {
    
var timeout = null; 
return function() {
     
 if(timeout !== null) clearTimeout(timeout); 
 timeout = setTimeout(fn, wait); 
} 
} // 处理函数
function handle() {
     
console.log(Math.random()); 
}
// 滚动事件 window.addEventListener('scroll', debounce(handle, 1000)); 

2.节流：

持续触发也执行，只是执行频率变低了。 就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

就像王者中的平A一样，你平A的多少只跟你的攻速有关系，跟你手速快慢没关系，即使你的手速比攻速还快，你的平A的多少也只和攻速有关。这就是节流。

实际应用：

//如下，持续触发 scroll 事件时，并不立即执行 handle 函数，每隔 1000 毫秒才会执行一次handle 函数
var throttle =function(func, delay) {
    
var prev = Date.now(); 
return function() {
     
 var context = this; 
 var args = arguments; 
 var now = Date.now(); 
 if (now - prev >= delay) {
     
 func.apply(context, args);
 prev = Date.now(); 
 } 
} 
}
function handle() {
    console.log(Math.random());} 
window.addEventListener('scroll', throttle(handle, 1000)); 

3.共同点

就是限制函数执行次数，以达到提高用户体验目的。