防抖&节流

Posted 2021-11-22 大白话优秀发言人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了防抖&节流相关的知识，希望对你有一定的参考价值。

什么是防抖(⭐⭐⭐)

防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。

防抖的应用场景：如淘宝搜索框，用户在输入框连续搜索一行字的时候可以通过防抖策略，知道用户把搜索内容全部打出才触发执行请求，这样可以有效减少请求的次数，节约请求资源

好处：用户在多次触发某事件的情况下只会执行最后一次

步骤：

1. 定义一个防抖动的 timer延时器并置空

2.获取页面中input DOM元素并绑定回车事件

3.先清除延时器，确保连续多次触发但只执行最后一次定时器

示例代码：

<body>
    <!-- 用户要进行输入的input框 -->
    <input type="text" name="" id="inp">
    <script>
        // 第一步：定义一个防抖动的timer延时器并置空
        var timer = null;
        var count = 0;  //count用于统计被触发的次数
        // 获取页面中input  DOM元素并绑定回车事件
        document.querySelector('#inp').addEventListener('keyup', function() {
            // 先清除定时器，确保连续多次触发但只执行最后一次定时器
            if (timer) clearInterval(timer)
            timer = setTimeout(function() {
                count++
                console.log('我被触发了' + count + '次');
            }, 1000)
        })
    </script>
</body>

效果图：

什么是节流(⭐⭐⭐)

节流策略（throttle）可以减少一段时间内事件的触发频率。

节流的应用场景

① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；

② 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；

效果：图片跟随鼠标移动

步骤：

1. 定义一个timer节流阀

2.定义一个延时器

3.如果节流阀不为空设置了鼠标跟随效果后，清空timer节流阀，方便下次开启延时器

4.判断节流阀是否为空，如果不为空（上次的代码还没执行完）就return等待执行完毕

示例代码：

<body>
    <img src="angel.gif" alt="" id="angel">
    <script>
        // 1.定义一个timer节流阀
        var timer = null;
        $(document).on('mousemove', function(e) {
            // 3.判断节流阀是否为空，如果不为空则上次的代码还没执行完
            if (timer) {
                return
            }
            // 2.定义一个延时器
            timer = setTimeout(function() {
                $('#angel').css({
                        'left': e.pageX - 40 + 'px',
                        'top': e.pageY - 40 + 'px'
                    })
                    // 2.如果节流阀不为空设置了鼠标跟随效果后，清空timer节流阀，方便下次开启延时器
                timer = null;
            }, 16)

        })
    </script>
</body>

以上是关于防抖&节流的主要内容，如果未能解决你的问题，请参考以下文章