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

阅读本书更多章节>>>>

防抖和节流原理+实现

防抖（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、使用场景：

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

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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-06/154637.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！