浅谈js防抖和节流
  V6d9fptxOWQ2 2023年11月01日 170 0

防抖和节流是处理高频触发最常见的优化方式,对性能提升有很大的帮助。

防抖:将多次的高频操作优化为只在最后一次执行,应用场景如:输入框,只需在最后一次输入进行校验即可。

节流:保证每隔一段时间只执行一次,降低触发的频率,将高频操作优化成低频操作。应用场景如:添加表单、滚动条事件、resize事件等高频监听事件。

 

 
防抖的代码:

 <input placeholder="请输入手机号" />

    <script>
        // 获取input对象
        let inp = document.querySelector('input');
        // 监听input值的变化
        inp.addEventListener('input', antiShake(animal, 2000))
        // 封装防抖方法
        function antiShake(fn, wait){ // fn:执行的函数,wait:设置的时间
            let timeSet = null;
            return args => {
                if(timeSet) clearTimeout(timeSet)
                timeSet =  setTimeout(fn, wait);
            }
        }
        function animal(){
            console.log("一条小狗");
        }
    </script>
       <style>
        .box {
           width: 200px;
           height: 200px;
           background-color: greenyellow; 
        }
    </style>
   // 鼠标按住移动触发事件   
    <div class="box"></div>
  let box = document.querySelector('.box');
        box.addEventListener("touchmove", throttle(run, 2000))

        function throttle(fn, wait) {
            let timer = null;
            return args => {
                if(!timer) {
                    timer = setTimeout(() => {
                        fn();
                        // 将timer释放
                        timer = null;
                    }, wait)
                }
            }
        }
        function run () {
            console.log("它在跑")
        }
        

区别:

防抖:在固定的时间内,时间只允许发生一次

节流:在一定的时间内,多个操作合并为一个,就比如:将水龙头的水流放小了一样

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  f18CFixvrKz8   2024年05月20日   93   0   0 JavaScript
  fxrR9b8fJ5Wh   2024年05月17日   53   0   0 JavaScript
  2xk0JyO908yA   2024年04月28日   41   0   0 JavaScript
V6d9fptxOWQ2