简述防抖和节流的应用场景及区别

1. 防抖策略

防抖策略(debounce)：是当事件被触发后,延迟n秒后再执行回调函数,如果在这n秒内事件被再次触发,则重新计时.

好处是:它能够保证用户在频繁触发某些事件的时候,不会频繁的执行回调,只会被执行一次.

防抖的概念：如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

防抖的应用场景:：

用户在输入框连续输入一串字符时,可以通过防抖策略,只在输入完后,才执行查询的请求,这样可以有效减少请求次数,节约请求资源.

实现
函数防抖:

function debounce(fn,wait){
    var timer = null;
    return function(){
        clearTimeout(timer)
        timer = setTimeout(()=>{
            fn()
        },wait)
    }
}
 
function fn1(){
    console.log(1)
}
window.onscroll = debounce(fn1,500)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2. 节流策略

节流策略(throttle):,可以减少一段时间内事件的触发频率.

节流阀的概念:

高铁的卫生间是否被占用,由红绿灯控制,假设一个每个人上洗手间要五分钟,则五分钟之内别人不可以使用,上一个使用完毕之后,将红灯设置为绿灯,表示下一个人可以使用了.下一个人在使用洗手间时需要先判断控制灯是否为绿色,来知晓洗手间是否可用.

–节流阀为空,表示可以执行下一次操作,不为空,表示不能使用下次操作.
–当前操作执行完之后要将节流阀重置为空,表示可以执行下次操作了.
–每次执行操作之前,先判断节流阀是否为空

节流策略的应用场景:

1）鼠标不断触发某事件时,如点击,只在单位事件内触发一次.
2）懒加载时要监听计算滚动条的位置,但不必要每次滑动都触发,可以降低计算频率,而不必要浪费CPU资源.
这里我们用一个鼠标跟随效果的例子:

1.渲染UI结构并美化样式

<!-- UI 结构 -->
<img src="./assets/angel.gif" alt="" id="angel" />
/* CSS 样式 */
html, body {
 margin: 0;
 padding: 0;
 overflow: hidden; }
#angel {
 position: absolute; }
1
2
3
4
5
6
7
8
9

2.使用节流优化鼠标跟随效果

1） 预定义一个timer节流阀
2）当设置鼠标跟随效果后,清空timer节流阀,方便下次开启延时器
3） 当执行事件是,先判断节流阀是否为空,如果不为空,则证明距离上次操作执行间隔还不到设置的时间

var angel=$(''.angel)
var timer=null;//预定义一个节流阀
$(document).on('mousemove',function(e){
if(timer){return}//判断节流阀是否为空
timer=setTimerout(function(){
$(angel).css('left',e.pageX+'px').css('top',e.pageY+'px')
timer=null;//清空节流阀,方便下次开启延时器
},16)
 
})
1
2
3
4
5
6
7
8
9
10

3. 防抖和节流的区别

防抖:如果事件被频繁触发,防抖保证只能有一次触发生效,前面N多次触发都会被忽略.

节流:如果时间被频繁触发,节流能减少事件触发的频率,因此,节流是有选择性的执行一部分事件.

总结: 函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

————————————————

原文链接：https://blog.csdn.net/qq_61006976/article/details/120708941