函数防抖&节流

最新推荐文章于 2024-08-25 13:14:30 发布

故事只若初见

最新推荐文章于 2024-08-25 13:14:30 发布

阅读量587

点赞数

本文链接：https://blog.csdn.net/qq_45424679/article/details/114459738

版权

当某个函数短时间内被频繁重复调用，无疑会影响应用性能，
同时也带来资源消耗，例如：

在输入框内容变化试，自动触发接口提交或者做接口查询
多次触发onClick、onScroll、onMousemove事件
等场景之下，都有可能会出现这个问题。

要处理这个问题，就需要控制函数的调用次数和频率，
不能每次触发都去做一次执行。这个时候就需要引入
函数防抖和节流两个概念
，下面我就来详细介绍一下。

首先我们用 mousemove 事件复现函数被频繁重复调用的场景，
页面代码如下：

<body>
  <div id="box">0</div>
</body>
<script>
  var $box = document.getElementById('box');
  var runTimes = 0
  
  $box.addEventListener('mousemove', onMouseMoveEvent)
  function onMouseMoveEvent() {
    runTimes++;
    box.innerHTML = runTimes;
  }
</script>
复制代码
在浏览器上运行代码，效果如下：

在监听 mousemove 事件的区域内移动鼠标，onMouseMoveEvent
 函数调用次数迅速迭加，短时间内到达了几百次。

据此，我们就抽象的画出 onMouseMoveEvent 函数15s内被调
用次数的模拟图如下

函数防抖（debounce）

先看一下常见防抖函数

function debounce(func, wait) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}
复制代码
从代码逻辑上，我们可以理解函数防抖的期望效果为：

给定一个延迟时间，当函数被调用时间间隔小于该时间时不会立即执行，

而是继续等待，当等待时间超过这个设定时间时，就执行该函数。
实际效果如何，我们给 mousemove 事件引入防抖看一下

$box.addEventListener('mousemove',debounce(onMouseMoveEvent, 
1000))
复制代码
将 mousemove 事件响应函数 onMouseMoveEvent 传入防抖函数 debounce

等待时间 wait 设置为 1000ms

函数引入防抖后，如果调用时间间隔小于设置的等待时间，
那么上一次的调用就会被忽略，直到间隔时间大于等待时
间的时候才会执行后触发的那一次执行。
其实防抖函数还有另外一种立即执行版本，代码如下：

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

实际上在常用的JavaScript 工具库 Underscore 中，
会将是否立即执行作为一个配置项，下面就是一个类似的可配置防抖函数：

/**
 * @desc 函数防抖
 * @param func 函数
 * @param wait 延迟执行毫秒数
 * @param immediate true 表立即执行，false 表非立即执行
 */
function debounce(func,wait,immediate) {
    let timeout;
    return function () {
        const context = this;
        const args = arguments;
        if (timeout) clearTimeout(timeout);
        if (immediate) {
            const callNow = !timeout;
            timeout = setTimeout(() => {
                timeout = null;
            }, wait)
            if (callNow) func.apply(context, args)
        }
        else {
            timeout = setTimeout(function(){
                func.apply(context, args)
            }, wait);
        }
    }
}
复制代码
函数节流（throttle）

节流与防抖都是为了再频繁触发的时候控制调用次数，
但不同之处在于，
节流是希望可以细水长流，调用的频率显得比防抖更加规律，
下面我们看一下节流函数：

function throttle(func, wait) {
    let timeout;
    return function() {
        let context = this;
        let args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}
复制代码
通过上面的实现代码可以看出，节流函数并没有在函数频繁调用的时候
，通过 clearTimeout 去重置定制器，而是在定时器初始化之后，
即timeout === true的时候，保障该定时器顺利执行完，
这样就有了上面讲到的调用频率更加规律。

下面我们就将节流函数应用到 mousemove 监听事件上

$box.addEventListener('mousemove',throttle(
onMouseMoveEvent,
 1000))
复制代码
将 mousemove 事件响应函数 onMouseMoveEvent 传入节流函数
 throttle
等待时间 wait 设置为 1000ms
我们看一下执行效果：