前端学习——防抖与节流

防抖与节流的定义

防抖（Debounce）： 防抖是一种技术，通过延迟执行函数来控制事件在短时间内连续触发时的执行次数，使得只有等待一定的间隔时间后，事件最后一次触发后的操作才会执行。简而言之，当事件持续触发时，防抖会等待一段时间后，执行最后一次触发的操作。（触发事件后 n 秒后才执行函数，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。）

核心逻辑：

• 重置计时器：每次事件触发时，都会重置计时器。
• 执行时机：只有在用户停止触发事件指定时间间隔后，才会执行最后一次事件。

节流（Throttle）： 节流是一种技术，通过控制在一定的时间间隔内只执行一次函数，来限制事件的触发次数。它确保在一个时间段内，事件处理函数被执行的最大频率为指定的间隔时间。指定的时间间隔内，无论触发了多少次事件，只有第一次事件会被执行，后续事件在这个间隔内都不会执行

核心逻辑：

• 单次执行：在时间间隔内只执行一次事件处理函数。
• 忽略后续触发：在时间间隔内，后续的事件触发将被忽略

防抖与节流的应用

防抖的应用

• 处理搜索框的输入事件，避免每次输入都发送请求，而是等待用户输入完毕后再发送请求。
• 处理窗口调整事件，避免频繁的重新渲染页面布局。
• 处理按钮点击事件，避免用户误操作导致重复的请求或页面跳转。

节流的应用

• 处理滚动事件，限制频繁触发的情况，例如在滚动加载场景中，只有在用户停止滚动一段时间后才加载内容。
• 处理鼠标移动事件，避免频繁触发事件处理函数，尤其对于一些消耗性能较大的操作，可以控制处理的频率

• 防抖适合处理连续触发的事件，等待时间后执行最后一次触发的操作，常用于输入框、窗口调整等场景。
• 节流适合处理频繁触发的事件，限制事件处理函数的执行频率，常用于滚动、拖拽等场景。

手写防抖函数

防抖的工作原理：

1. 设置一个定时器，在事件触发时启动计时器。
2. 每当事件触发时，清除之前的计时器。
3. 重新设置一个新的定时器，等待一定的时间间隔。
4. 如果再该时间内间隔内再次触发了事件，重复2，3。
5. 在最后一个计时器完成后，实行事件处理函数。

function antiiShanke(fn,wait){
            
            let timeOut=null;
            return args=>{
                if(timeOut) clearTimeout(timeOut)
                timeOut=setTimeout(fn,wait)

            }
        }

手写节流函数

function throttle(event,time){
            let timer=null;
            return function(){
                if(!timer){
                    timer=setTimeout(()=>{
                        event();
                        timer=null;
                    },time)
                }
            }
        }