【前端】防抖和节流原理+实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了【前端】防抖和节流原理+实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

防抖和节流原理+实现

防抖（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);