JavaScript中的防抖和节流技术

翻滚的胖子
2023-06-16 15:12:15
JavaScript 图片处理

JavaScript中的防抖和节流是一个经常被使用到的技术。在实际的开发中，我们经常会遇到一些需要频繁触发的事件，如浏览器的resize、scroll、keyup、keydown等事件。在这些事件中，如果我们频繁地触发函数，很容易造成性能问题，因此我们需要使用防抖和节流技术。

什么是防抖和节流

防抖和节流都是针对函数在执行过程中的频繁调用进行优化的一种技术。防抖和节流的目的都是为了减少函数的执行次数，从而提高页面的性能。

防抖

防抖的原理是在一定的时间间隔内，如果事件多次触发，只执行最后一次事件。在这个时间间隔内，如果事件又被触发了，则重新计算时间间隔。以input输入框为例，我们可以在用户停止输入后，再触发函数进行查询操作，避免了连续频繁的查询。

防抖函数的参数包含两个，一个是要执行的函数，另一个是时间间隔。当事件被触发时，就会将时间间隔重置，因此最终只有最后一次事件触发时才会执行函数。

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

上面是一个简单的防抖函数，我们可以通过调用这个函数来进行防抖操作。

节流

节流的原理是在一定的时间间隔内，如果事件多次触发，只执行一次事件。在这个时间间隔内，如果事件又被触发了，则不会执行函数。以滚动事件为例，我们可以在一段时间内只触发一次函数，从而减少函数的执行次数。

节流函数的参数包含两个，一个是要执行的函数，另一个是时间间隔。当事件被触发时，如果在时间间隔内，函数已经被执行过了，则不会再次执行函数，直到时间间隔到了才会再次执行函数。

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

上面是一个简单的节流函数，我们可以通过调用这个函数来进行节流操作。