防抖小例子

最新推荐文章于 2023-10-06 23:56:19 发布

无声有寒

最新推荐文章于 2023-10-06 23:56:19 发布

阅读量317

点赞数 1

分类专栏： 36道js手写文章标签： javascript vue.js html5

本文链接：https://blog.csdn.net/qq_33651064/article/details/120471713

版权

36道js手写专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的防抖(debounce)技术，通过实例解释了防抖如何限制函数的执行频率，确保在最后一次操作后执行。文中展示了防抖函数的实现，并探讨了其在事件监听，如按钮点击场景中的应用，以及如何处理`this`的指向问题。同时，文章还提供了一个封装防抖函数的示例，帮助开发者更好地理解和使用防抖技术。

摘要由CSDN通过智能技术生成

1.防抖简而言之，控制程序触发的次数，以最后一次为准。
一个小例子，点击按钮，触发定时器，一定时间后打印。
正常情况下，点多少次，就打印多少个，触发太频繁。
防抖的做法是：点击的时候，删除旧的定时器，添加新的定时器这样时间到了只会触发最后一个。

<body>
    <button>按钮</button>
    <script>
        function pay() {
            console.log('买买买！')
        }
        
        let btn = document.querySelector('button')
        let t
        //监听器第二个参数是要执行的函数，所以deBounce的返回值应该是一个函数。
        btn.addEventListener('click',function (){
            //每次点击都会清除当前的定时器
            clearTimeout(t)
            //设置新的定时器
            t = setTimeout(pay,1000)
        })
    </script>
</body>

通常我们将防抖封装成一个debounce函数。它一个参数是业务逻辑代码，一个参数是延迟。
注意this的指向，定时器里放的箭头函数，所以this指向的是btn已经确定。调用的时候用call来使pay指向input。

 <button>按钮</button>
    <script>
        function pay() {
            console.log('买买买！')
            console.log(this)
        }
        //fn是业务逻辑，delay是延迟
        function debounce(fn, delay) {
            //保存定时器
            let t = null
            return function (){
                if (t !== null) {
                    clearTimeout(t)
                }
                
                //箭头函数的this指向定义的地方
                //debounce里的this指向btn,因为是btn调用的
                //call重新绑定this
                t = setTimeout(()=>{
                    fn.call(this)
                }, delay)
            }
            
        }
        
        let btn = document.querySelector('button')
        //这个时候的this指向button
        //btn.addEventListener('click',pay)
        //监听器第二个参数是要执行的函数，所以deBounce的返回值应该是一个函数。
        //但由于回调函数，这个时候的this指向window
        btn.addEventListener('click',debounce(pay,1000))
        
    </script>
</body>