防抖
当某个事件触发时，等待一段时间再执行函数。如果在这段时间内事件再次被触发，那么就重新计时，换句话说，防抖可以确保函数在事件结束后才被执行，避免了多次触发。
应用场景：
- 搜索框输入：用户在输入时，防止每个字符都发起一次请求。
- 窗口调整：在窗口大小变化时，避免频繁触发事件。
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);
节流
在固定时间间隔内，确保事件触发的函数最多只执行一次，换句话说，节流可以确保事件触发时，不管多频繁，只有在一定的时间间隔内才执行一次函数。
应用场景：
- 滚动事件：比如监听页面滚动，避免因每次滚动触发高频率的事件。
- 按钮点击：控制按钮在短时间内不能被多次点击，避免重复提交。
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>
