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

前言

       今天又是及其平常的一天，中午吃完饭在工位小憩，顺便幻想一下彩票中奖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);

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

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

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

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

沁园春·雪

北国风光，千里冰封，万里雪飘。

望长城内外，惟余莽莽；大河上下，顿失滔滔。

山舞银蛇，原驰蜡象，欲与天公试比高。

须晴日，看红装素裹，分外妖娆。

江山如此多娇，引无数英雄竞折腰。

惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。

一代天骄，成吉思汗，只识弯弓射大雕。

俱往矣，数风流人物，还看今朝。

结语

🔥如果此文对你有帮助的话，欢迎💗关注、👍点赞、⭐收藏、✍️评论，支持一下博主~