vue3学习之防抖和节流

在前端开发中，我们经常会遇到这样的情况：某些事件（如滚动、输入、点击等）会频繁触发，如果不加以控制，可能会导致性能问题。Vue3 中的防抖（Debounce）和节流（Throttle）就是用来解决这类问题的两种常用技术。

一、什么是防抖和节流？

1. 防抖（Debounce）

什么是防抖？

就像我们按电梯按钮，不管你按多少次，电梯只会在你松手一段时间后才会启动。

当事件触发时，不立即执行处理函数，而是等待一段时间（比如300ms）。如果在这段时间内事件再次触发，则重新计时。只有在指定时间内事件不再触发，才会真正执行处理函数。

适用场景：

1、搜索框输入联想（避免每次按键都发送请求）
2、窗口大小调整事件
3、按钮点击防重复提交

2. 节流（Throttle）

什么是节流？

当我们滚动页面时，可能需要执行某些操作，比如懒加载图片、检测滚动位置等。如果不加限制，滚动事件会非常频繁地触发，导致性能问题。

在固定的时间间隔内（比如300ms），无论事件触发多少次，处理函数只会执行一次。

适用场景：

1、滚动事件
2、鼠标移动事件
3、游戏中的连续按键处理

二、简单实现

1. 防抖的简单实现

function debounce(func, delay) {let timer = null;return function(...args) {// 如果已经有计时器，先清除if (timer) clearTimeout(timer);// 设置新计时器timer = setTimeout(() => {func.apply(this, args);timer = null; // 执行后重置}, delay);}
}

Vue3 组件示例：

<script setup>
import { ref } from 'vue';const searchQuery = ref('');// 创建防抖函数
const debouncedSearch = debounce((query) => {console.log('执行搜索:', query);// 这里可以调用API
}, 500);const handleInput = (e) => {searchQuery.value = e.target.value;debouncedSearch(searchQuery.value);
};
</script>
<template><input @input="handleInput" placeholder="搜索..." />
</template>

2. 节流的简单实现

function throttle(func, delay) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= delay) {func.apply(this, args);lastTime = now;}}
}

Vue3 组件示例：

<script setup>
import { ref } from 'vue';const scrollPosition = ref(0);// 创建节流函数
const throttledScroll = throttle(() => {scrollPosition.value = window.scrollY;console.log('滚动位置:', scrollPosition.value);
}, 200);const handleScroll = (e) => {throttledScroll();
};
</script>
<template><div @scroll="handleScroll" style="height: 200px; overflow-y: scroll;"><!-- 很多内容 --><div v-for="i in 100" :key="i">内容 {{ i }}</div></div>
</template>

三、更健壮的实现（包含取消功能）

实际开发中，我们可能需要取消防抖/节流操作，比如组件卸载时清理定时器。

1. 带取消功能的防抖

function debounce(func, delay) {let timer = null;// 返回一个函数对象，包含执行方法和取消方法const debounced = function(...args) {if (timer) clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};// 添加取消方法debounced.cancel = function() {clearTimeout(timer);timer = null;};return debounced;
}

Vue3 组件中使用：

<script setup>
import { onUnmounted, ref } from 'vue';const searchQuery = ref('');
let debouncedSearch = null;onUnmounted(() => {// 组件卸载时取消防抖if (debouncedSearch) debouncedSearch.cancel();
});debouncedSearch = debounce((query) => {console.log('执行搜索:', query);// 这里可以调用API
}, 500);const handleInput = (e) => {searchQuery.value = e.target.value;debouncedSearch(searchQuery.value);
};
</script>

四、使用 Lodash 库

如果你不介意使用第三方库，Lodash 提供了更完善的实现：

npm install lodash

或

yarn add lodash

使用示例：

import { debounce, throttle } from 'lodash';// 防抖
const debouncedFn = debounce(() => {console.log('防抖执行');
}, 300);// 节流
const throttledFn = throttle(() => {console.log('节流执行');
}, 300);

Vue3 中使用：

<script setup>
import { onUnmounted } from 'vue';
import { debounce } from 'lodash';const handleSearch = debounce((query) => {console.log('搜索:', query);
}, 300);const onInput = (e) => {handleSearch(e.target.value);
};onUnmounted(() => {// 取消防抖handleSearch.cancel();
});
</script>