什么是防抖和节流?有什么区别? JavaScript中防抖和节流的区别及适用场景
君哥
阅读:1946
2018-12-26 15:27:53
评论:0
作用:节流和防抖作为页面性能优化的一种策略,可以降低回调函数的执行频率,节省计算资源,能有效减少浏览器引擎的损耗,防止出现页面堵塞卡顿现象。
一、节流:简单地说,就是限制一个动作在一段时间内只能执行一次
打个比方,好比我们打英雄联盟或者王者荣耀的时候,释放技能都有一段冷却时间,比如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秒才会执行回城事件。
一般使用场景:
1、登录、发短信等按钮避免用户点击太快,以致于发送了多次请求,需要防抖
2、调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次到位,就用到了防抖
代码实现:
function debounce(fn,delay){ let timer = null return ()=>{ if(timer){ clearTimeout(timer) } timer = setTimeout(() => { fn.apply(this,arguments) timer = null }, delay); }}
发表评论