帮我写一个按钮的防抖节流

在JavaScript中，防抖（debounce）和节流（throttle）是两种常用的性能优化技术，用于控制频繁调用的函数执行。它们通常用于处理用户输入事件，如点击按钮时，避免在短时间内连续触发多次操作。

**防抖（Debounce）：**
防抖函数会在最后一次触发后等待一段时间再执行。如果在这段时间内再次触发，计时器会被重置，只有在等待时间过后没有新的触发，才会执行回调函数。

示例代码（使用setTimeout实现简单防抖）：

function debounce(func, delay) {
    let timeoutId;

    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            func.apply(this, arguments);
        }, delay);
    };
}

**节流（Throttle）：**
节流函数会限制函数的执行频率，即使在短时间内触发多次，也只会执行一次，并在下一次触发间隔到来之前返回结果。

示例代码（同样使用setTimeout实现简单节流）：

function throttle(func, delay) {
    let timeoutId;
    let lastExecuted = 0;

    return function() {
        const context = this;
        const args = arguments;

        if (Date.now() - lastExecuted >= delay) {
            clearTimeout(timeoutId);
            lastExecuted = Date.now();
            func.apply(context, args);
        }
    };
}

**如何在按钮上应用防抖或节流：**
你可以这样使用这两个函数来包裹你的按钮点击事件的处理函数：

const button = document.getElementById('myButton');
button.addEventListener('click', debounce(handleClick, 300)); // 防抖300毫秒

// 或者使用节流
button.addEventListener('click', throttle(handleClick, 300)); // 节流300毫秒

function handleClick() {
    // 你的业务逻辑代码
}