JS中防抖和节流

目录

防抖和节流是什么:

js防抖和节流实现的原理:

如何实现:

防抖和节流的应用场景：

---

防抖和节流是什么:

防抖和节流是两种控制函数执行频率的技术，主要用于优化事件处理程序的性能。它们的主要区别在于执行时机和执行次数。

防抖（Debounce）是一种在一段时间内无论触发多少次事件，都只执行一次事件处理程序的技术。具体来说，如果在设定的时间段内，事件被重复触发，则会重新计算延迟时间。例如，电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。

节流（Throttle）则是在一段时间内无论事件触发多么频繁，都只执行一次事件处理程序的技术。如果在设定的时间段内，事件被重复触发，则只会执行第一次触发的事件处理程序。例如，电梯第一个人进来后，15秒后准时运送一次，这是节流。
 

js防抖和节流实现的原理:

防抖和节流的实现主要依赖于定时器技术。防抖的原理是，当事件被触发后，设定一个延迟时间n秒，如果在这段时间内又被触发，则重新计算延迟时间。而节流的原理是，当事件被触发时，设定一个延迟时间n秒执行该事件，如果在这n秒内再次被触发，也不影响事件的执行。

这两种方法都是为了限制函数的执行频次，优化函数触发频率过高导致的响应速度跟不上触发频率的问题。它们可以防止在短时间内频繁触发同一事件而导致的延迟、假死或卡顿的现象。具体来说，防抖是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

如何实现:

防抖函数的实现：
 

function debounce(fn, delay) {
    let timer = null;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function() {
            fn.apply(context, args);
        }, delay);
    }
}

在这段代码中，我们创建了一个延迟器timer，当事件被触发时清除已有的定时器并设定一个新的。如果在delay时间段内再次触发该事件，则会重新设定一个新的定时器。

节流函数的实现:

function throttle(fn, delay) {
    let previous = 0;
    return function() {
        const now = Date.now();
        const context = this;
        const args = arguments;
        if (now - previous > delay) {
            fn.apply(context, args);
            previous = now;
        }
    }
}

在这段代码中，我们设定了一个变量previous为上一次执行函数的时间，每次执行函数时都会比较当前时间与previous的差值是否大于设定的delay值。只有在大于delay值的情况下才会执行函数，从而达到控制函数执行频率的目的。

防抖和节流的应用场景：

防抖和节流的主要应用场景包括：

• 防抖应用：当需要用户最后一次输入完才发送请求时，如搜索框的搜索输入、窗口大小调整resize等，都适合使用防抖技术。这样可以有效防止因为用户频繁输入导致的结果重复渲染。
• 节流应用：对于一些需要在连续触发事件时，按照一定的时间间隔执行回调的场景，比如滚动加载、鼠标不断点击等，都可以通过节流来实现。这样可以控制函数的执行频率，避免因为事件处理程序执行过于频繁而导致的性能问题。