一文看懂JavaScript防抖和节流的简单实现

一、什么叫防抖和节流

防抖：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；防抖是在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作，防抖动是将多次执行变为最后一次执行。

节流：高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。节流是将多次执行变成每隔一段时间执行。

二、防抖和节流的区别

区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

三、如何实现防抖和节流

1、防抖

思路：每次触发事件时都取消之前的延时调用方法

function debounce(fn) { 
     let timeout = null; 
     // 创建一个标记用来存放定时器的返回值  
     return function () {    
         clearTimeout(timeout);
         // 每当用户输入的时候把前一个 setTimeout clear 掉    
         timeout = setTimeout(() => {       
         // 然后又创建一个新的 setTimeout      
         // 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数     
             fn.apply(this, arguments);    
         }, 500); 
};}
function sayHi() {  console.log('防抖成功');}
var inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖

2、节流

思路：每次触发事件时都判断当前是否有等待执行的延时函数

function throttle(fn) {  
     let canRun = true; 
     // 通过闭包保存一个标记 
     return function () {   
          if (!canRun) return; 
          // 在函数开头判断标记是否为 true，不为 true 则return    
          canRun = false; // 立即设置为 false   
          setTimeout(() => { // 将外部传入的函数的执行放在 setTimeout 中    
              fn.apply(this, arguments);   
              // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了     
              // 当定时器没有执行的时候标记永远是 false，在开头被 return 掉    
                   canRun = true;    
          }, 500);  
     };
}
function sayHi(e) {  
    console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));

四、应用场景

1、防抖

①、每次 resize/scroll 触发统计事件

②、 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

2、节流

①、DOM 元素的拖拽功能实现（mousemove）

②、射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）

③、计算鼠标移动的距离（mousemove）

④、搜索联想（keyup）