学习笔记-自定义防抖函数

最新推荐文章于 2024-06-03 11:05:26 发布

super小白白

最新推荐文章于 2024-06-03 11:05:26 发布

阅读量246

点赞数

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

本文链接：https://blog.csdn.net/weixin_47184967/article/details/128485831

版权

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

自定义防抖基础版完善

 <!-- 防抖函数实现核心代码： -->
    <script>

        // 1、封装防抖函数，传入要执行的函数 fun ，延迟时间 delay
        function mydebounce(fun,delay) {

            // 4、初始化 timer 为 null
            let timer = null

            // 2、设置一个新的函数，用于清除定时器和调用需要执行的函数
            const _debounce = () => {
                
                // 5、如果 timer 有值，代表有执行过定时器，就将定时器清除
                if(timer) clearTimeout(timer)

                // 6、setTimeout 返回值是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器，这里接收每一次触发的定时器编号
                timer = setTimeout(() => {

                    //  7、调用传入的函数
                    fun()

                    // 9、方法执行完毕后，将 timer 初始化
                    timer = null

                    // 8、设置传入的延迟时间
                }, delay);
            }
            // 3、返回一个新的函数,定时器已经经过处理，并且调用需要执行的函数
            return _debounce
        }
    </script>

    
    <!-- 使用上面自定义的防抖函数 -->

    <!-- 1、定义输入框用于测试 -->
    <input type="text">

    <script>
        // 2、获取 input 元素
        const inputEl = document.querySelector("input")

        // 3、监听 input 元素的输入次数
        let counter = 1

        // 4、每次输入东西，就会执行 mydebounce 函数，在 mydebounce 函数里面调用 需要执行的函数
        inputEl.oninput = mydebounce(function() {

            console.log(`发送网络请求${counter++}`,this.value);    

        },1000)

    </script>
    ```

新增防抖this指向+取消请求功能

<!-- 
    p728   
    场景：
        用户在输入框输入内容，在等待的中途切换了页面，或者退出了程序，那么这次的网络请求就没必要再发送了      
 -->
<body>                  
    <!-- 防抖函数实现核心代码： -->
    <script>

        // 1、封装防抖函数，传入要执行的函数 fun ，延迟时间 delay
        function mydebounce(fun,delay) {

            // 4、初始化 timer 为 null
            let timer = null

            // 2、设置一个新的函数，用于清除定时器和调用需要执行的函数
            // 这里使用箭头函数会有问题，this指向的是widows，要使用普通函数
            // 传参个数不一定，使用剩余参数
            const _debounce = function(...event){
                
                // 5、如果 timer 有值，代表有执行过定时器，就将定时器清除
                if(timer) clearTimeout(timer)

                // 6、setTimeout 返回值是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器，这里接收每一次触发的定时器编号
                timer = setTimeout(() => {

                    //  7、执行传入的函数,并且改变this指向，往上层作用域找，让它指向 _debounce ，因为 _debounce 绑定了input，所以此时this 指向的是input 
                    fun.apply(this,[...event])

                    // 9、方法执行完毕后，将 timer 初始化
                    timer = null

                    // 8、设置传入的延迟时间
                }, delay);
            }

            // 给 _debounce 绑定一个取消函数
            _debounce.cancel = function () {
                if (timer) clearTimeout(timer)
            }

            // 3、返回一个新的函数,定时器已经经过处理，并且调用需要执行的函数
            return _debounce
        }
    </script>

    
    <!-- 使用上面自定义的防抖函数 -->

    <!-- 1、定义输入框用于测试 -->
    <input type="text">
    <!-- 取消按钮，模拟取消请求 -->
    <button class="cancel">取消</button>

    <script>
        // 2、获取 input 元素
        const inputEl = document.querySelector("input")
        const cancelBtn = document.querySelector(".cancel")

        // 3、监听 input 元素的输入次数
        let counter = 1

        // 4、每次输入东西，就会执行 mydebounce 函数，在 mydebounce 函数里面调用 需要执行的函数
        // 这里将 event 参数传给 mydebounce 函数
        const debounceFn = mydebounce(function(event) {

            // 5、这里的 this 在没有经过防抖处理是指向的是 input 所以是input中输入的value值
            // 经过防抖处理后 this 指向的是 window ,因为在 mydebounce 里面执行这个函数时是独立调用的
            console.log(`发送网络请求${counter++}`,this.value,this,event);    

        },3000)

        // 监听输入 input 框
        inputEl.oninput = debounceFn

        // 监听取消按钮
        cancelBtn.onclick = function() {
            debounceFn.cancel()
        }

    </script>
</body>
    ```