节流和防抖
- 节流和防抖两者有什么区别?
- 节流和防抖分别用于什么场景?
**节流(
throttle
)和防抖(
debounce
)是两种常用的浏览器事件处理方法。**
相同点：
- 都是为了减少事件触发频率，优化性能。
不同点：
- 节流是指在一段时间内最多触发一次事件，节流算法会在特定的时间间隔内判断是否触发事件；
- 防抖是指在一段时间内只要有事件触发，就重新计算时间，直到这段时间内没有事件触发，才真正的执行事件；
- 节流适用于持续的触发，防抖适用于短时间内的大量触发。
防抖（debounce）
防抖是一种浏览器事件处理方式，通俗地说，它是在短时间内大量触发事件时，只在最后一次事件触发结束后才真正的执行事件的过程。
通俗的说：防抖，防止抖动“你先抖动着，啥时候停了，再执行下一步”
举个例子，当用户快速输入搜索关键字时，浏览器每隔
500ms才会执行事件处理函数。这意味着，当用户快速输入的过程中，浏览器会不断重新计算执行事件的时间，直到
500ms内用户停止输入，才真正的执行事件处理函数。
这样做的好处是，防止大量不必要的事件触发，对性能有很好的优化作用。
代码实现（code）
functiondebounce(fn, delay =200){let timer =0returnfunction(){if(timer)clearTimeout(timer)
timer =setTimeout(()=>{fn.apply(this,arguments)// 透传this 和参数
timer =0},delay)}}
案例测试（test）
监测输入框，用户快速输入内容过程中，防抖函数的处理效果。
防抖之前：
<body>
搜索：<inputid="input1"/><script>functiondebounce(fn, delay =200){let timer =0returnfunction(){if(timer)clearTimeout(timer)
timer =setTimeout(()=>{fn.apply(this,arguments)// 透传this 和参数
timer =0},delay)}}const input1 = document.getElementById('input1')
input1.addEventListener('keyup',(e)=>{
console.log(e.target.value)})</script></body>
效果：
防抖之后：
<body>
搜索：<inputid="input1"/><script>functiondebounce(fn, delay =200){let timer =0returnfunction(){if(timer)clearTimeout(timer)
timer =setTimeout(()=>{fn.apply(this,arguments)// 透传this 和参数
timer =0},delay)}}const input1 = document.getElementById('input1')
input1.addEventListener('keyup',debounce((e)=>{
console.log(e.target.value)},300))</script></body>
效果：
**对比结果：防抖过滤了许多不必要的事件触发，只在用户输入结束
300ms
后打印了输入框的结果，减少了浏览器的性能消耗。**
节流（throttle）
节流是一种浏览器事件处理方式，通俗地说，它是限制事件在特定时间内最多触发一次的过程。
节流，节省交互沟通，流，不一定指流量
通俗的讲：“别急，一个一个来，按时间节奏来，插队者无效”
举个例子，当用户持续滚动鼠标滚轮时，浏览器每隔
100ms触发一次事件处理函数。这意味着，不管用户滚动的速度如何，在每
100ms的时间内最多只会触发一次事件处理函数。
这样做的好处是，防止事件过于频繁的触发，对性能有很好的优化作用。
代码实现（code）
functionthrottle(fn, delay =100){let timer =0returnfunction(){if(timer)return
timer =setTimeout(()=>{fn.apply(this,arguments)// 透传this 和参数
timer =0},delay)}}
案例测试（test）
监测拖拽工程中，元素的位置信息，节流函数处理的效果。
节流之前：
<body><divid="drag"draggable="true"style="width: 100px ;height: 50px;background-color: brown;padding: 10px;">
可拖拽
</div><script>functionthrottle(fn, delay =100){let timer =0returnfunction(){if(timer)return
timer =setTimeout(()=>{fn.apply(this, arguments)// 透传this 和参数
timer =0}, delay)}}const div1 = document.getElementById('drag')
div1.addEventListener('drag',(e)=>{
console.log('拖拽的位置:',e.pageX,e.pageY)})</script></body>
效果：
节流之后：
<body><divid="drag"draggable="true"style="width: 100px ;height: 50px;background-color: brown;padding: 10px;">
可拖拽
</div><script>functionthrottle(fn, delay =100){let timer =0returnfunction(){if(timer)return
timer =setTimeout(()=>{fn.apply(this, arguments)// 透传this 和参数
timer =0}, delay)}}const div1 = document.getElementById('drag')
div1.addEventListener('drag',throttle((e)=>{
console.log('拖拽的位置:',e.pageX,e.pageY)},300))</script></body>
效果：
**对比结果：节流防止了频繁的事件触发，只在用户拖拽的过程中，每隔
300ms
打印了元素的位置信息，减少了浏览器的性能消耗。**
总结
- 节流：限制执行频率，有节奏的执行
- 防抖：限制执行次数，多次密集触发只执行一次
- 节流关注“过程”，防抖关注“结果”
- 实际工作还是使用 lodash 工具库较好
本文转载自: https://blog.csdn.net/qq_36362721/article/details/128927798
版权归原作者 天界程序员 所有， 如有侵权，请联系我们删除。
版权归原作者 天界程序员 所有， 如有侵权，请联系我们删除。