简述防抖和节流,以及如何实现

防抖(debounce)和节流(throttle)

本质都是为了控制函数在高频事件下的触发次数,降低函数执行频率,节省计算资源,提高性能。不然的话,会容易造成网络阻塞,页面卡顿,或者数据错乱覆盖等情况。

两者区别:

防抖:

   高频事件下,控制执行最后一次

节流:

高频事件下,控制(函数)执行的次数。也就是一个单位时间内,只允许执行1次。


实现一个简单的防抖:


    

    
  

案例分析:

         第一次点击了输入框,输入内容后,开启定时器,timer会得到一个值。(这个值代表着等待队列);

        第二次输入内容时,会进入if判断(已经有值,不为null)。执行清除定时器。重新生成一个定时器,timer得到一个新的值;

        如果在3秒内,不停的输入内容,则会不停地触发事件——清除上一个定时器,开启新的定时器;

         直到最后一次输入结束,最后一个定时器等待3秒后,输出结果。

可以看出,防抖的关键点在于:利用闭包,在返回的函数体里,通过不断开启和清除定时器,在限定时间内不断点击,仍然只执行最后一次


实现简单版的节流:

        第一种方式:通过时间戳实现             

            间隔时间 wait

            初始时间 start-time

            最新时间 new-time (事件被触发时计算)

            当2者时间差 < wait , 不能执行事件函数

            当2者时间差 > = wait , 执行操作

        案例分析



第二种方式: 通过控制锁的状态,实现节流

 

第一次,lock=true ,进入if判断,关锁---等待3秒,开锁,执行操作;

第二次,lock=true ,进入判断,关锁---等待3秒,开锁,重复操作...

你可能感兴趣的:(JS,javascript)