防抖和节流的实现

防抖和节流在前端开发中是一种非常常见的需求，它们主要用于限制函数的执行频率，优化性能。下面将介绍防抖和节流的实现过程

1.防抖

防抖是指在事件被触发n秒后再执行回调函数，如果在这n秒内又被重新触发，则重新计算执行时间。简单来说，就是如果持续触发事件，那么回调函数只会在停止触发n秒后执行一次。

防抖的应用场景主要是那些需要频繁触发但又不需要立即执行的事件，比如搜索框的输入事件。在用户输入搜索关键词时，可能每输入一个字符都会触发搜索请求，但这显然是不合理的，因为用户可能还在继续输入。这时就可以使用防抖，设定一个时间间隔，只有当用户停止输入一段时间后，才执行搜索请求。
代码实现：

function debounce(func, wait) {  
    let timeout;  
    return function() {  
        const context = this;  
        const args = arguments;  
        clearTimeout(timeout);  
        timeout = setTimeout(function() {  
            func.apply(context, args);  
        }, wait);  
    };  
}  
  
// 使用示例  
const myEfficientFn = debounce(function() {  
    // 这里是需要被防抖的函数，比如发送请求或更新界面  
    console.log('Function executed!');  
}, 250);  
  
window.addEventListener('resize', myEfficientFn);

2.节流

节流是指规定一个单位时间，在这个单位时间内，无论触发多少次回调，都只执行一次。简单来说，就是如果持续触发事件，那么回调函数会以一定的频率执行。

节流的应用场景主要是那些需要频繁触发但又不需要每次都立即执行的事件，比如滚动加载、窗口大小调整等。在这些场景下，如果每次触发事件都执行回调函数，可能会导致性能问题。因此，可以使用节流来限制回调函数的执行频率。
代码实现：

function throttle(func, limit) {  
    let inThrottle;  
    return function() {  
        const context = this;  
        const args = arguments;  
        if (!inThrottle) {  
            func.apply(context, args);  
            inThrottle = true;  
            setTimeout(function() {  
                inThrottle = false;  
            }, limit);  
        }  
    };  
}  
  
// 使用示例  
const myThrottledFn = throttle(function() {  
    // 这里是需要被节流的函数，比如滚动加载或更新动画  
    console.log('Function throttled!');  
}, 100);  
  
window.addEventListener('scroll', myThrottledFn);

总的来说，防抖和节流都是用于优化性能的技术，它们的主要区别在于对函数执行频率的控制方式不同。在实际开发中，可以根据具体的需求选择使用哪种技术。