目录
防抖（Debounce）
节流（Throttle）
如何选择使用防抖和节流？
总结
Vue 3 中使用防抖（Debounce）和节流（Throttle）
防抖（Debounce）示例
节流（Throttle）示例
在前端开发中，性能优化是一个非常重要的课题，尤其是在处理用户与网页的频繁交互时。防抖（Debounce）和节流（Throttle）是两种常用的技术手段，用于优化高频率执行的代码，确保应用的响应既迅速又高效。虽然它们的目的相似，但它们的工作原理和适用场景有所不同。
防抖（Debounce）
定义：防抖是指在事件被触发后，等待一段时间（例如 n 毫秒），如果在这段时间内没有再次触发该事件，则执行相应的操作；如果在等待时间内事件再次被触发，则重新计时。
工作原理：
- 当事件首次触发时，设置一个定时器，等待 n 毫秒。
- 如果在 n 毫秒内事件再次被触发，则清除之前的定时器，并重新设置一个新的定时器。
- 只有在 n 毫秒内没有再次触发事件时，才会执行相应的操作。
适用场景：
- 输入框搜索：用户在输入框中输入内容时，通常不希望每次按键都触发搜索请求，而是希望在用户停止输入一段时间后才发起请求。
- 窗口大小调整：当用户调整浏览器窗口大小时，不希望每次调整都触发布局计算，而是在用户停止调整后才进行计算。
- 按钮点击：防止用户在短时间内多次点击按钮导致重复操作。
节流（Throttle）
定义：节流是指在一定时间间隔内，无论事件被触发多少次，只执行一次操作。
工作原理：
- 当事件首次触发时，立即执行相应的操作，并设置一个定时器，等待 n 毫秒。
- 在 n 毫秒内，即使事件再次被触发，也不会执行操作。
- 只有在 n 毫秒后，事件再次被触发时，才会重新执行操作。
适用场景：
- 滚动事件：当用户滚动页面时，不希望每次滚动都触发事件处理函数，而是希望在一定时间间隔内只执行一次。
- 鼠标移动：当用户移动鼠标时，不希望每次移动都触发事件处理函数，而是希望在一定时间间隔内只执行一次。
- 频繁的API调用：例如在游戏中，控制角色的移动，希望在一定时间间隔内只执行一次移动操作。
如何选择使用防抖和节流？
- 防抖：适用于用户操作停止后才需要执行的场景，例如输入框搜索、窗口大小调整等。防抖确保只有在用户停止操作一段时间后才会执行相应的操作。
- 节流：适用于需要控制事件执行频率的场景，例如滚动事件、鼠标移动等。节流确保在一定时间间隔内只执行一次操作，避免频繁触发。
总结
- 防抖：在用户停止操作一段时间后执行操作。
- 节流：在一定时间间隔内只执行一次操作。
Vue 3 中使用防抖（Debounce）和节流（Throttle）
在 Vue 3 中使用防抖（Debounce）和节流（Throttle）可以通过自定义指令或直接在方法中使用防抖和节流函数来实现。
防抖（Debounce）示例
假设我们有一个输入框，当用户停止输入一段时间后，我们希望触发一个搜索操作。
<template>
<div class="search-container">
<input v-model="searchQuery" @input="debouncedSearch" placeholder="搜索..." class="search-input" />
</div>
</template>
<script setup>
import { ref } from 'vue';
// 定义搜索查询的绑定变量
const searchQuery = ref('');
// 使用防抖动函数来限制搜索的频率
const debounce = (func, wait) => {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
};
// 定义实际的搜索函数
const search = () => {
console.log('Search triggered with query:', searchQuery.value);
// 这里可以调用搜索 API
};
// 创建一个防抖动版本的搜索函数，以减少搜索请求的频率
const debouncedSearch = debounce(search, 300);
</script>
<style scoped>
.search-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-input {
width: 300px;
padding: 10px 15px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 25px;
outline: none;
transition: border-color 0.3s ease;
}
.search-input:focus {
border-color: #007bff;
}
</style>
节流（Throttle）示例
假设我们有一个滚动容器，用于显示大量内容。我们希望在一定时间间隔内只执行一次滚动处理函数。
<template>
<div class="scroll-container" @scroll="throttledScroll">
<p v-for="i in 100" :key="i" class="scroll-item">{{ i }}</p>
</div>
</template>
<script setup>
// 节流函数，用于控制函数调用频率
const throttle = (func, wait) => {
let lastTime = 0;
return function (...args) {
const now = new Date().getTime();
if (now - lastTime >= wait) {
func.apply(this, args);
lastTime = now;
}
};
};
// 处理滚动事件的函数
const handleScroll = () => {
console.log('Scroll event handled');
// 这里可以处理滚动事件
};
// 使用节流函数处理滚动事件
const throttledScroll = throttle(handleScroll, 300);
</script>
<style scoped>
.scroll-container {
height: 200px;
overflow-y: scroll;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
background-color: #f9f9f9;
}
.scroll-item {
padding: 5px 0;
border-bottom: 1px solid #eee;
font-size: 14px;
color: #333;
}
.scroll-item:last-child {
border-bottom: none;
}
</style>
