防抖和节流

2022-04-05 14:34:20 阅读：185 来源： 互联网

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

防抖和节流

1、防抖

2.节流