js防抖与节流的封装

天才小熊猫点、

已于 2024-08-22 17:52:39 修改

阅读量1.2k

点赞数

分类专栏：前端笔记文章标签： javascript 开发语言 ecmascript

于 2022-08-13 20:54:22 首次发布

本文链接：https://blog.youkuaiyun.com/m0_56219678/article/details/126321715

版权

前端笔记专栏收录该内容

33 篇文章

订阅专栏

防抖

防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。（在固定时间内，将多次操作变成一次。）

在开发中，经常遇到当在输入框中输入内容，就会向后台发送请求。这时候就需要前端做一个优化。

首先在页面创建一个输入框，模拟一下当输入框值发生改变，就会发送请求。

<body>
<input placeholder="请输入电话"/>

<script>
    // 第一步获取input元素，监听事件
    let lelInput = document.querySelector('input')
    lelInput.addEventListener('input', (e) => {
        console.log('发起请求了')
    })
</script>
</body>

当我们值发生变化，就会发送一次请求。所以我们需要封装一个防抖函数，进行优化。

防抖的思路：是将多次操作变成一次，那我们可以利用clearInterval和setTimeout。当触发事件的时候，把延时器清除，然后再设置样式器。

    // 防抖函数
    function antishake(fu,time) {
        let timeOut = null;
        return function() {
            if(timeOut) clearInterval(timeOut)
            timeOut = setTimeout(fu,time)
        }
    }

完整代码：

<body>
<input placeholder="请输入电话"/>

<script>
    // 第一步获取input元素，监听事件
    let lelInput = document.querySelector('input')
    lelInput.addEventListener('input',antishake(myAxios,2000))

    // 防抖函数
    function antishake(fu,time) {
        let timeOut = null;
        return function() {
            if(timeOut) clearInterval(timeOut)
            timeOut = setTimeout(fu,time)
        }
    }

    //请求操作
    function myAxios() {
        console.log('发起请求了')
    }

</script>
</body>

节流

节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。（一定时间内多个事件合为一个。）

应用场景：1.提交表单 2.高频监听事件

防抖的思路：每次触发事件，调用延时器，执行完清空延时器。当下一次触发事件，如果延时器执行完成，则继续执行。这样就实现了n秒内只执行一次。

    // 节流函数
    function throttle(fu,time) {
        let timeOut = null;
        return function() {
            if(!timeOut) {
                timeOut = setTimeout(()=>{
                    fu();
                    timeOut = null;
                },time)
            }
        }
    }

完整代码：

<body>
    <div class="box" style="width: 300px;height: 300px;background-color:red;">

    </div>

<script>
    // 第一步获取box元素，监听事件
    let box = document.querySelector('.box')
    box.addEventListener('touchmove',throttle(myAxios,2000))

    // 节流函数
    function throttle(fu,time) {
        let timeOut = null;
        return function() {
            if(!timeOut) {
                timeOut = setTimeout(()=>{
                    fu();
                    timeOut = null;
                },time)
            }
        }
    }

    //请求操作
    function myAxios() {
        console.log('发起请求了')
    }
</script>
</body>

以上就是js防抖与节流。