什么是防抖和节流

防抖和节流都是限制事件的频发触发的技术，主要应用在JavaScript中。

防抖（debounce）指的是在事件持续触发期间，只有等待事件停止触发一段时间后，才会执行事件函数。如果在这段时间内再次触发事件，则重新计时。这种方法常用于输入框搜索等场景，在输入结束后一段时间才进行搜索请求，如果在这段时间内又输入内容，则重新计时。

节流（throttle）则是指在持续触发事件时，每一段时间执行一次函数。也就是说，在单位时间内只能触发一次函数，即使在这个单位时间内多次触发函数，也只有一次生效。这种方法常用于鼠标不断点击触发等场景，在规定的时间内多次点击只生效一次。

二者的目的都是为了避免因事件触发频率过高而导致的响应速度跟不上触发频率，从而出现延迟、假死或卡顿的现象。

基本的防抖函数的示例：

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

这个函数接收两个参数，一个是你想要防抖的函数，另一个是等待的时间（以毫秒为单位）。在这个函数中，我们使用 setTimeout 来延迟函数调用，如果在等待时间内再次触发该函数，我们会清除前一个定时器并重新设置。如果在等待时间内没有再次触发，那么定时器到期后，我们会调用函数。

基本的节流函数的示例：

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

这个函数接收两个参数，一个是你想要节流的函数，另一个是节流的时间间隔（以毫秒为单位）。在这个函数中，我们使用 setTimeout 来设置节流时间间隔，如果在节流时间内没有再次触发函数，我们会调用函数并设置 inThrottle 为 true。如果在节流时间内再次触发函数，我们会清除前一个定时器并重新设置。这样，我们就可以保证在每个节流时间间隔内只调用一次函数。

总结

最后，防抖和节流的目的都是控制事件的触发频率，以避免频繁触发导致的性能问题。它们通过限制事件处理函数的执行次数，从而减少不必要的计算和操作。在实际开发中，我们可以根据具体的需求和场景选择合适的优化策略，并结合性能测试和用户反馈进行调优，以达到更好的效果。