什么是节流与防抖?
君哥
阅读:1822
2019-10-30 08:38:06
评论:3
作用:节流和防抖作为页面性能优化的一种策略,可以降低回调函数的执行频率,节省计算资源,能有效减少浏览器引擎的损耗,防止出现页面堵塞卡顿现象。
一、节流:简单地说,就是限制一个动作在一段时间内只能执行一次
打个比方,好比我们打英雄联盟或者王者荣耀的时候,释放技能都有一段冷却时间,比如Q技能有5秒的冷却时间,那么我们在5秒钟的时间内只能释放一次Q技能。
一般使用场景:
1、scroll
事件,每隔一秒计算一次位置信息等
2、input
框实时搜索并发送请求展示下拉列表,每隔一秒发送一次请求
代码实现:
function throttle (fn,delay){ let timer = null return ()=>{ if (timer){return} timer = setTimeout(() => { fn.apply(this,arguments) timer = null }, delay); }}
二、防抖:简单地说,就是 当一个动作连续触发,只执行最后一次。
还是举一个英雄联盟中的例子,比如你按下了回城键,那么在8秒钟之后,就会执行回城事件,但如果你再次按下回城键,那么回城时间又将重新计时,需要在等8秒才会执行回城事件。
一般使用场景:
登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
代码实现:
function debounce(fn,delay){ let timer = null return ()=>{ if(timer){ clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this,arguments) timer = null }, delay); }}
来源:https://zhuanlan.zhihu.com/p/466102509
支持博主优质文章,讲解的非常详细
写的不错 说明方法之后顺便害科普了一下
长见识了