117笔记问答在 JavaScript 中，防抖（debounce）和节流（throttle）是两种常用的优化高频率触发事件的技术。它们都可以避免误操作，但实现方式有所不同。下面分别介绍这两种技术如何避免误操作。
- 防抖（debounce）
防抖的核心思想是在一定时间内，无论触发多少次事件，都只执行一次目标函数。这样可以避免因频繁触发事件而导致的误操作。
防抖的实现方法如下：
function debounce(func, wait) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
使用防抖的例子：
const handleInput = (event) => {
console.log('Input:', event.target.value);
};
const debouncedHandleInput = debounce(handleInput, 500);
document.getElementById('input').addEventListener('input', debouncedHandleInput);
在这个例子中，当用户在输入框中输入时，防抖函数会确保在 500 毫秒内只执行一次 handleInput 函数，从而避免误操作。
- 节流（throttle）
节流的核心思想是在一定时间内，只执行一次目标函数。这样可以避免因频繁触发事件而导致的误操作。
节流的实现方法如下：
function throttle(func, wait) {
let lastTime = 0;
return function (...args) {
const context = this;
const currentTime = Date.now();
if (currentTime - lastTime > wait) {
func.apply(context, args);
lastTime = currentTime;
}
};
}
使用节流的例子：
const handleScroll = (event) => {
console.log('Scrolling:', event.target.scrollTop);
};
const throttledHandleScroll = throttle(handleScroll, 100);
window.addEventListener('scroll', throttledHandleScroll);
在这个例子中，当用户滚动页面时，节流函数会确保在 100 毫秒内只执行一次 handleScroll 函数，从而避免误操作。
总结：
- 防抖适用于需要根据用户输入或操作触发的事件，如输入框的实时搜索、窗口大小调整等。
- 节流适用于需要根据用户连续滚动或移动触发的事件，如滚动加载、鼠标移动跟随等。
通过合理选择防抖和节流，可以有效地避免误操作，提高用户体验。