防抖

当某个事件触发时，等待一段时间再执行函数。如果在这段时间内事件再次被触发，那么就重新计时，换句话说，防抖可以确保函数在事件结束后才被执行，避免了多次触发。

应用场景：

1. 搜索框输入：用户在输入时，防止每个字符都发起一次请求。
2. 窗口调整：在窗口大小变化时，避免频繁触发事件。

function debounce(func, delay) {let timeout;return function (...args) {clearTimeout(timeout);  // 每次事件触发时，清除上一次的延时timeout = setTimeout(() => {func.apply(this, args);  // 在延时后执行函数}, delay);};
}// 示例：用户输入时防抖，避免频繁调用
const searchInput = document.querySelector('#search');
const handleSearch = debounce(function () {console.log('搜索:', searchInput.value);
}, 500); // 延时 500ms 执行searchInput.addEventListener('input', handleSearch);

节流

在固定时间间隔内，确保事件触发的函数最多只执行一次，换句话说，节流可以确保事件触发时，不管多频繁，只有在一定的时间间隔内才执行一次函数。

应用场景：

1. 滚动事件：比如监听页面滚动，避免因每次滚动触发高频率的事件。
2. 按钮点击：控制按钮在短时间内不能被多次点击，避免重复提交。

function throttle(func, delay) {let lastTime = 0;return function (...args) {const now = new Date().getTime();if (now - lastTime > delay) {  // 确保每隔一定时间才执行一次func.apply(this, args);lastTime = now;}};
}// 示例：滚动时节流，避免频繁触发事件
const handleScroll = throttle(function () {console.log('滚动位置:', window.scrollY);
}, 1000); // 每 1000ms 执行一次window.addEventListener('scroll', handleScroll);

总结

特性/对比	防抖（Debounce）	节流（Throttle）
事件触发频率	等待停止触发后再执行	在固定时间间隔内执行一次
主要用途	用于高频事件，如输入框、搜索等	用于持续事件，如滚动、窗口大小调整等
执行时机	最后一次触发后延迟执行	固定间隔内执行一次
触发条件	触发事件停止后执行	固定时间间隔内触发一次

案例

效果

代码

<template><div><input type="text" id="search" v-model="searchValue" placeholder="请输入搜索内容"><div id="scrollDiv" style="height: 3000px; background-color: lightgray;"></div></div>
</template><script setup>
import { ref, onMounted, onUnmounted } from 'vue';// 防抖函数
function debounce (func, delay) {let timeout;return function (...args) {clearTimeout(timeout);timeout = setTimeout(() => {func.apply(this, args);}, delay);};
}// 节流函数
function throttle (func, delay) {let lastTime = 0;return function (...args) {const now = new Date().getTime();if (now - lastTime > delay) {func.apply(this, args);lastTime = now;}};
}// 搜索输入框的值
const searchValue = ref('');// 防抖示例
const searchHandler = debounce(() => {console.log('搜索内容:', searchValue.value);
}, 500);// 节流示例
const scrollHandler = throttle(() => {console.log('当前滚动位置:', window.scrollY);
}, 1000);onMounted(() => {const searchInput = document.querySelector('#search');searchInput.addEventListener('input', searchHandler);window.addEventListener('scroll', scrollHandler);
});onUnmounted(() => {const searchInput = document.querySelector('#search');searchInput.removeEventListener('input', searchHandler);window.removeEventListener('scroll', scrollHandler);
});
</script><style></style>