防抖和节流

本文深入探讨了JavaScript中两种常见的事件处理优化技术——防抖和节流。防抖技术用于限制函数的执行频率,在高频触发事件如鼠标移动事件mousemove后,确保函数在设定的时间间隔后仅执行一次。而节流则是通过限制函数在设定时间内执行的次数,降低执行频率。这两个概念对于优化页面性能和提升用户体验至关重要。
摘要由CSDN通过智能技术生成

  防抖:针对于高频触发事件如鼠标移动事件mousemove所做出的处理。

触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

 let box = document.querySelector('.box')

        let timout1 = 0;

        box.onmousemove = function(){

            if(timout1) clearTimeout(timout1)

               

           

          timout1 = setTimeout(()=>{

                console.log(11);

                timout1=0;

            },1000)

        }

        box.οnmοusemοve=debounce(f)

        function movefn (f){

            console.log(111);

        }

节流:也是针对于高频触发事件

高频事件触发,但在n秒内只执行一次,所以节流会稀释函数的执行频率。

 let box = document.querySelector('.box');

        let timout = 0;

        box.οnmοusemοve= function(){

            if(timout){

              return ;

            }

      setTimeout (()=>{

       console.log(1);

       timout = 0;

      },1000);

        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值