【前端】防抖和节流原理+实现

防抖和节流原理+实现

防抖（Debounce）和节流（Throttle）都是用于控制函数执行频率的机制，它们在处理高频触发的事件时非常有用。

1、防抖（Debounce）

防抖的原理是在事件被触发后，等待一段时间（例如200毫秒）来执行函数，如果在等待时间内事件被再次触发，则重新计时。这样可以避免在短时间内多次触发事件导致函数频繁执行的问题，常用于输入框搜索、窗口调整等场景。

functiondebounce(func, delay){let timer;returnfunction(){clearTimeout(timer);
       timer =setTimeout(()=>{func.apply(this, arguments);}, delay);}}// 使用 debounce 包装需要防抖的函数const debouncedFunc =debounce(function(){
     console.log('防抖函数执行');},200);// 在事件处理中使用 debouncedFunc
   element.addEventListener('input', debouncedFunc);

Vue3自定义ref实现防抖

customRef

是 Vue 3 中的一个函数，用于创建一个自定义的响应式引用（Custom Ref）。它可以用来定义具有自定义行为的响应式数据，比如在数据发生变化时触发特定的副作用。

使用

customRef

函数需要传入一个 factory 函数，该函数会返回一个对象，该对象必须包含以下两个属性：

1. get：一个无参数的函数，用于获取引用的当前值。
2. set：一个带有一个参数的函数，用于设置引用的值。

通过

customRef

创建一个自定义的响应式引用。它内部维护了一个变量

value

存储当前值，并且在

get

和

set

方法中分别调用了

track

和

trigger

函数，以便在引用的值发生变化时通知依赖追踪和触发更新。

/src/hooks/debounceRef.js

import{ customRef }from'vue';exportfunctiondebounceRef(value, duration =1000){let timer =null;returncustomRef((track, trigger)=>{return{get(){// 收集依赖track();return value;},set(newValue){clearTimeout(timer);
                timer =setTimeout(()=>{
                    value = newValue;// 派发更新trigger();}, duration);}}})}

/src/App.vue

<template><divclass="container"><inputtype="text"v-model="text"><p>{{ text }}</p></div></template><scriptsetup>import{ debounceRef }from'./hooks/debounceRef'const text =debounceRef('',500)</script><stylelang="less"scoped>.container{width: 80%;margin: 0 auto;}</style>

2、节流（Throttle）

节流的原理是规定一个时间间隔（例如200毫秒），在该时间间隔内只能触发一次函数执行。如果在该时间间隔内多次触发事件，只有第一次触发会执行函数，后续的触发会被忽略。节流常用于滚动事件、按钮点击等场景。

functionthrottle(func, interval){let lastTime =0;returnfunction(){let now = Date.now();if(now - lastTime >= interval){func.apply(this, arguments);
         lastTime = now;}}}// 使用 throttle 包装需要节流的函数const throttledFunc =throttle(function(){
     console.log('节流函数执行');},200);// 在事件处理中使用 throttledFunc
   element.addEventListener('scroll', throttledFunc);

3、使用场景：

• 输入框实时搜索：在用户输入内容时，通过防抖来减少请求的频率，在用户停止输入一段时间后再发送请求。
• 窗口调整事件：当窗口大小调整时，使用节流来控制回调函数的执行频率，避免过度频繁地执行。
• 页面滚动事件：在监听页面滚动时，使用节流来减少函数的触发频率，提高性能。
• 鼠标移动事件：当鼠标在元素上移动时，使用节流来限制触发函数的次数，避免过于频繁的回调。

总体来说，防抖和节流都是优化高频触发事件的机制，可以提升性能和用户体验。根据具体需求选择合适的方式来应用。