防抖小例子

最新推荐文章于 2022-06-18 20:17:11 发布

无声有寒

最新推荐文章于 2022-06-18 20:17:11 发布

阅读量292

点赞数 1

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

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

版权

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

4 篇文章 0 订阅

订阅专栏

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>

无声有寒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖小例子

1.防抖简而言之，控制程序触发的次数，以最后一次为准。一个小例子，点击按钮，触发定时器，一定时间后打印。正常情况下，点多少次，就打印多少个，触发太频繁。防抖的做法是：点击的时候，删除旧的定时器，添加新的定时器这样时间到了只会触发最后一个。<body> <button>按钮</button> <script> function pay() { console.log('买买买！')
复制链接

扫一扫