【解决方案】【最佳实践】测试小姐姐动了我的奶酪: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);

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

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

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

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

沁园春·雪

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

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

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

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

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

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

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

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

结语

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

寻找DX3906

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值