函数防抖和节流的原理、应用场景、区别、手写源码

小草莓蹦蹦跳

已于 2023-10-30 15:37:46 修改

阅读量342

点赞数

分类专栏：前端性能优化每日专栏 JavaScript 文章标签： javascript 前端性能优化

于 2020-11-06 17:54:24 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/107641666

版权

结论先行：

防抖和节流呢，本质上是优化高频率执行代码的一种手段；通过减少调用的频率，从而提高性能；

① 防抖(Debounce):

防抖的原理是在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，那么会重新计时。

② 节流(Throttle):

节流的原理是在一段时间内只执行一次事件回调函数，如果在这段时间内事件又被触发了，则忽略该事件。

两者的区别在于:

不管事件触发有多频繁，节流都会保证在规定时间内，一定会执行一次回调函数。而防抖只是在最后一次事件触发后才执行一次回调函数。

应用：

通过防抖节流，减少频繁下发接口造成页面卡顿，以及避免重复下发接口造成数据错乱。

比如新增表单按钮，没有做防抖，那就会重复调用接口去插入重复的数据，这就可能会造成事故。

还有一些接口查找数据量大的，如果不做防抖节流，重复下发就会导致页面卡顿甚至卡死的现象。

手写源码：

① 防抖(Debounce):

  <body>
    <button onClick="toClick('参数1', '参数2', '参数3')">触发防抖</button>
    <script>
        const toClick = toDebounce(function() {
            fn(arguments)
        }, 1000);

        function fn() {
            console.log("主要的逻辑触发在这里哦", [...arguments[0]]);
        }

        // 防抖
        function toDebounce(fn, delay = 1000) {
            // 维护同一个timer
            // timer是每次setTimeout都会产生的一个唯一的计时器id
            var timer = null
            if (typeof fn !== 'function') {
                throw new TypeError('Expected a function')
            }
            return function () {
                let args = arguments
                if (timer) {
                    // 通过清理计时器id，就可以清理相应的计时事件
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn.apply(this, args)
                }, delay)
            }
        }
    </script>
  </body>

防抖如果需要立即执行，可加入第三个参数用于判断，实现如下：

        const toClick = toDebounce(function() {
            fn(arguments)
        }, 1000, true);

        function fn() {
            console.log("主要的逻辑触发在这里哦", [...arguments[0]]);
        }

        /* 防抖
        * fn: 回调函数
        * delay: 延迟时长（毫秒）
        * immediate: 是否立即执行
        */
        function toDebounce(fn, delay = 1000, immediate = false) {
            // 维护同一个timer
            // timer是每次setTimeout都会产生的一个唯一的计时器id
            var timer = null
            if (typeof fn !== 'function') {
                thro

最低0.47元/天解锁文章

小草莓蹦蹦跳

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
函数防抖和节流的原理、应用场景、区别、手写源码

如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）不管事件触发有多频繁，节流都会保证在规定时间内，一定会执行一次回调函数。节流的原理是在一段时间内只执行一次事件回调函数，如果在这段时间内事件又被触发了，则忽略该事件。防抖的原理是在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，那么会重新计时。任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。
复制链接

扫一扫

专栏目录