防抖和节流原理+实现

防抖（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 函数，该函数会返回一个对象，该对象必须包含以下两个属性：

get：一个无参数的函数，用于获取引用的当前值。 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、使用场景：

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

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