ip007的防抖

在软件开发中，防抖（Debouncing）是一种常用的技术，主要用于限制事件触发的频率，当我们在搜索框中输入文字时，我们不希望每输入一个字符就发送一次请求，而是希望在用户停止输入一段时间后再发送请求，这就是防抖技术的应用。

防抖的原理是：当一个事件被触发后，设置一个定时器，等待一段时间再执行事件处理函数，如果在这段时间内，事件再次被触发，那么清除之前的定时器，重新设置一个新的定时器，这样，事件处理函数就不会在短时间内被频繁触发。

防抖的实现方式有很多种，这里以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);
    };
}

这个debounce函数接受两个参数：一个是我们要防抖的函数func，另一个是等待的时间wait，在这个函数内部，我们定义了一个变量timeout来保存定时器的标识符，然后返回一个新的函数，这个新的函数会在每次被调用时清除之前的定时器，并设置一个新的定时器。

我们可以使用这个debounce函数来实现防抖：

const searchInput = document.querySelector('search-input');
const searchFunc = debounce(function() {
    console.log('Searching...');
}, 300);
searchInput.addEventListener('input', searchFunc);

在这个例子中，我们首先获取了搜索框元素，然后定义了一个搜索函数searchFunc，并使用debounce函数将其防抖化，我们将这个防抖后的搜索函数添加到搜索框的input事件上，这样，每当用户在搜索框中输入文字时，搜索函数就会在用户停止输入300毫秒后执行。

防抖技术不仅可以用于搜索框的输入事件，还可以用于很多其他的场景，例如窗口大小调整、滚动事件等，只要我们希望限制事件处理函数的执行频率，就可以使用防抖技术。

防抖并不是万能的，在某些情况下，我们可能需要的是节流（Throttling）技术，而不是防抖技术，节流和防抖的原理类似，都是限制事件处理函数的执行频率，但是它们的应用场景和实现方式有所不同。

节流的原理是：当一个事件被触发后，不管事件是否被频繁触发，都按照设定的频率执行事件处理函数，当我们在页面上滚动时，我们不希望每滚动一点就发送一次请求，而是希望每隔一段时间发送一次请求，这就是节流技术的应用。

节流的实现方式也有很多种，这里以JavaScript为例，介绍一种简单的节流实现方法。

我们需要一个函数来设置定时器：

function throttle(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        if (!timeout) {
            timeout = setTimeout(function() {
                timeout = null;
                func.apply(context, args);
            }, wait);
        }
    };
}

这个throttle函数接受两个参数：一个是我们要节流的函数func，另一个是等待的时间wait，在这个函数内部，我们定义了一个变量timeout来保存定时器的标识符，然后返回一个新的函数，这个新的函数会在每次被调用时检查是否有定时器正在执行，如果没有，就设置一个新的定时器，如果有定时器正在执行，那么就直接返回，不执行任何操作。

我们可以使用这个throttle函数来实现节流：

window.addEventListener('scroll', throttle(function() {
    console.log('Scrolling...');
}, 300));

在这个例子中，我们将一个节流后的函数添加到窗口的滚动事件上，这样，每当用户滚动页面时，这个函数就会每隔300毫秒执行一次。