防抖和节流

2022-04-05 14:34:20 作者：互联网

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.节流

标签：触发,防抖,定时器,节流,最后,打印,inp,一次
来源： https://www.cnblogs.com/kira2022/p/16102254.html