面试题：防抖和节流

防抖（debounce）和节流（throttle）是前端开发中用于优化性能和用户体验的两种技术手段，它们通常用于处理高频触发的事件，比如窗口的resize、scroll事件，或者用户输入（如键盘事件）等。

防抖（debounce）

防抖技术的核心思想是：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。这样可以确保事件处理函数不会被频繁调用，从而减少资源消耗。

例如，当用户在搜索框中输入时，我们可能希望在用户停止输入一段时间后才发送请求到服务器进行搜索。这时就可以使用防抖技术。

javascript
复制
function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(function() {
            func.apply(context, args);
        }, wait);
    };
}

节流（throttle）

节流技术的核心思想是：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

例如，我们可能希望限制用户在短时间内多次点击按钮时，只执行一次点击事件的处理函数，以避免重复提交表单或发送请求。

javascript
复制
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

使用场景

• 防抖：适用于连续触发的事件，如窗口的resize、scroll事件，用户输入等，需要在事件停止后执行一次操作。
• 节流：适用于需要限制执行频率的场景，如窗口的resize、scroll事件，用户输入等，需要在一定时间内执行一次操作。

在实际应用中，根据具体需求选择使用防抖还是节流，或者结合使用两种技术，以达到最佳的性能优化效果。