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

防抖和节流原理+实现

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

1、防抖（Debounce）

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

   function debounce(func, delay) {
     let timer;
     
     return function() {
       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';

export function debounceRef(value, duration = 1000) {
    let timer = null;
    return customRef((track, trigger) => {
        return {
            get() {
                // 收集依赖
                track();
                return value;
            },
            set(newValue) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    value = newValue;
                    // 派发更新
                    trigger();
                }, duration);
            }
        }
    })
}

/src/App.vue

<template>
    <div class="container">
        <input type="text" v-model="text">
        <p>{{ text }}</p>
    </div>
</template>

<script setup>
import { debounceRef } from './hooks/debounceRef'
const text = debounceRef('', 500)
</script>

<style lang="less" scoped>
.container {
    width: 80%;
    margin: 0 auto;
}
</style>

2、节流（Throttle）

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

   function throttle(func, interval) {
     let lastTime = 0;
     
     return function() {
       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、使用场景：

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

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