【解决方案】【最佳实践】测试小姐姐动了我的奶酪：JS前端节流与防抖-CSDN博客

本文链接：https://blog.csdn.net/u011143504/article/details/138855728

前言

今天又是及其平常的一天，中午吃完饭在工位小憩，顺便幻想一下彩票中奖1000万后的人生规划。忽然闻到一股芬芳的气味。这不是别人，正是我们的测试小美女。我睁开朦胧的双眼，感觉芬芳的味道之中带有一股杀气，果然不出所料。她直奔我而来，不由分说把我拍醒。“醒醒啊，刚做的实时搜索功能偶尔会出现卡顿！！”她指责说道。但是我看她娇滴滴的小表情，还是违心的原谅了她。造孽啊！！！！！

多年的职业素养，让我直奔主题。打开chrome调试工具，来调试一下这个莫名其妙的bug。果然如此，在搜索栏输入内容的时候，每输入一个字母都会请求一次，network中打印了好多网络请求。这种高频的请求是造成卡顿的主要原因，毕竟浏览器的性能是有限的，容不得我们这样放肆。让我们一起讨论如何优化这种场景，来化解测试小姐姐的杀气。

单刀直入，现在的目标就要减少请求的数量,节省流量。来吧，造作吧。拿出我的杀手锏~~防抖(debounce)和节流(throttle)。

一、首先让我们先认识一下他们：

1.防抖(debounce)：对于短时间内连续触发的事件（上面的场景：连续请求同一个接口），防抖的含义就是让某个时间期限内（约定200毫秒），事情处理函数只执行一次。举个栗子：我连续输入100个字母，在输入最后一个字母后，再等200毫秒，执行请求接口。

2.节流(throttle)：对于短时间内连续触发的事件（上面的场景：连续请求同一个接口），节流的含义就是在某个时间期限内每隔（预定300毫秒）执行一次。举个例子：我连续输入100个字母，在输入过程中，每隔300毫秒就请求一次接口。也就是说等输入完100个字母，会请求很多次接口。

二、解决方案：

1.针对上述场景，我们先采用防抖函数。

function debounce(fn, delay = 200) {
  if (typeof fn !== 'function') {
     // 参数类型为函数 
     throw new TypeError('fn is not a function'); 
  } 
  let lastFun = null; 
  return function(...args) { 
     if (lastFun) { 
        clearTimeout(lastFun); 
     } 
     lastFun = setTimeout(fn, delay); 
  } 
}

在使用防抖函数之后，发现在停止输入200毫秒之后，才会触发请求。貌似是解决了卡顿和浪费资源的问题。

2.采用节流函数

经过深思熟虑之后，咱们搜索框的input事件，是需要支持实时搜索的。因此防抖的函数这个解决方案还是差那么一点点点意思。让我们使用节流来试验一下吧。

function throttle(fn,delay){
 let jieke = true; 
 return function(){ 
   if(!jieke){ 
     return false;
   } 
   jieke = false; 
   setTimeOut(()=>{ 
      fn(); 
      jieke = true;
   },delay); 
  } 
} 
throttle(()=>{console.log('我爱你，测试小姐姐')},300);

经过测试，节流函数比较符合我们的实现场景。

看到这个测试结果。测试小姐姐，表现出了前所未有的惊讶，脸上也透出了微微红润。这时她附耳说道：“下班后，在楼下咖啡厅等我。”

未完待续........

各位看官，知道为什么测试小姐姐，突然面带桃花，粉里透红了吗？是咱方案出的漂亮，还是因为.......欢迎留言,多多指导批评。