【JavaScript】JavaScript 防抖与节流：以游戏智慧解锁实战奥秘

// 防抖函数: 在函数执行时，如果在设定的等待时间内再次调用函数，则重新设置等待执行时间。
function debounce(fn, wait) {
    let timeout = null;
    return function() {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);
        let callNow = !timeout;
        timeout = setTimeout(() => {
            timeout = null;
        }, wait);
        if (callNow) fn.apply(context, args);
    };
}
 
// 节流函数: 确保一定时间内只执行一次函数。
function throttle(fn, wait) {
    let previous = 0;
    return function() {
        let context = this;
        let args = arguments;
        let now = new Date();
        if (now - previous > wait) {
            fn.apply(context, args);
            previous = now;
        }
    };
}
 
// 使用示例
// 假设 handleDebounce 和 handleThrottle 是绑定了事件监听的函数
let handleDebounce = debounce(function() {
    console.log('防抖函数执行了！');
}, 1000);
 
let handleThrottle = throttle(function() {
    console.log('节流函数执行了！');
}, 1000);
 
// 用户触发事件时，调用防抖或节流函数
document.getElementById('debounceButton').addEventListener('click', handleDebounce);
document.getElementById('throttleButton').addEventListener('click', handleThrottle);

这段代码定义了防抖和节流函数，并展示了如何使用它们来处理事件监听中的函数执行。在实际应用中，防抖用于输入框的搜索功能，防止用户输入时频繁触发搜索请求，而节流用于鼠标移动或滚动事件，确保事件处理器被频繁调用时只执行一次。