防抖

1、防抖

防抖：用户连续多次触发事件，只有最后一次触发执行操作
例如：输入框输入触发，输入时不触发打印，只有等最后一次输入完才触发打印操作

let inp=document.querySelector('input')
        inp.oninput=function(){
            console.log(thhis.value);
        }

如何判断是最后一次触发了？
解决方法：当间隔时间0.5秒后没有触发操作，则认为是最后一次，执行打印操作
设置定时器：
设置全局变量t=null用t来控制事件的触发
思路：触发事件，就有定时器，在触发，就清除前面的定时器，在新建一个，直到最后一次触发，前面定时器全部清除完，在新建一个，o.5秒后触发打印（相当于回城）

<body>
    <input type="text">
    <script>
        let inp=document.querySelector('input')
        let t=null
        inp.oninput=function(){
            //如果不是最后一次，就清除计时器
            if(t!==null){
                //把之前触发的定时器清掉，在新建一个，最终只要最后一次
                 clearTimeout()
            }
            //如果是最后一次触发，执行打印操作
           t= setTimeout(()=>{
                console.log(this.value);
            },500)
            
        }
     
    </script>
</body>

2.利用闭包封装防抖的策略

将防抖代码和业务逻辑放在一起看的时候很复杂，所以我们把防抖代码封装起来，使其与业务逻辑分离出来

1.定义一个防抖函数debounce,第一个参数为function(){}里面是真正的业务逻辑代码，第二个参数为时间500秒

debounce(function(){
            //页面的业务逻辑
            console.log(this.value);
        },500)

2.将防抖代码抽离出来 定义防抖函数

debounce(){
	return function(){
            //如果不是最后一次，就清除计时器
            if(t!==null){
                //把之前触发的定时器清掉，在新建一个，最终只要最后一次
                // clearTimeout()
            }
            //如果是最后一次触发，执行打印操作
           t= setTimeout(()=>{
                console.log(this.value);
            },500)
            
        }
}

debounce(fn,delay){
	 let t=null
	return function(){
            //如果不是最后一次，就清除计时器
            if(t!==null){
                //把之前触发的定时器清掉，在新建一个，最终只要最后一次
                // clearTimeout()
            }
            //如果是最后一次触发，执行打印操作
           t= setTimeout(()=>{
                //console.log(this.value);
                fn()
            },delay)
            
        }
}

4.将其赋值给触发函数

let inp=document.querySelector('input')
       
        //将防抖的业务逻辑封装起来为debounce，与页面的业务逻辑分离
        //传的一个参数function(){}为页面的业务逻辑
        inp.oninput=debounce(function(){
            //页面的业务逻辑
            console.log(this.value);
        },500)

但还有一个问题，当你打印以上代码时，this.value会返回undefined,为什么了？
我们可以尝试打印下this,得出this=window,我们可以使用call函数将this指向input
在定时器里我们发现this指向input，
注意：
fn:里面的this是window
定时器里的this是input，
我们就可以：fn.call(this)
将调用fn的this指向input了

重写第3个
3.

debounce(fn,delay){
	 let t=null
	return function(){
            //如果不是最后一次，就清除计时器
            if(t!==null){
                //把之前触发的定时器清掉，在新建一个，最终只要最后一次
                // clearTimeout()
            }
            //如果是最后一次触发，执行打印操作
           t= setTimeout(()=>{
                //console.log(this.value);
                fn.call(this)
            },delay)
            
        }
}
posted @ 2022-04-05 14:17  Kira的学习笔记  阅读(75)  评论(0)    收藏  举报