节流和防抖

函数节流和防抖都是「闭包」、「高阶函数」的应用

函数节流 throttle 指的是某个函数在一定时间间隔内(例如 3 秒)执行一次,在这 3 秒内 无视后来产生的函数调用请求

节流可以理解为养金鱼时拧紧水龙头放水,3 秒一滴
  • 「管道中的水」就是我们频繁操作事件而不断涌入的回调任务,它需要接受「水龙头」安排
  • 「水龙头」就是节流阀,控制水的流速,过滤无效的回调任务
  • 「滴水」就是每隔一段时间执行一次函数
  • 「3 秒」就是间隔时间,它是「水龙头」决定「滴水」的依据

应用:监听滚动事件添加节流函数后,每隔固定的一段时间执行一次
实现方案 1:用时间戳来判断是否已到执行时间,记录上次执行的时间戳,然后每次触发后执行回调,判断当前时间距离上次执行时间的间隔是否已经达到时间差(Xms) ,如果是则执行,并更新上次执行的时间戳,如此循环
实现方案 2:使用定时器,比如当 scroll 事件刚触发时,打印一个 hello world,然后设置个 1000ms 的定时器,此后每次触发 scroll 事件触发回调,如果已经存在定时器,则回调不执行方法,直到定时器触发,handler 被清除,然后重新设置定时器

函数防抖 debounce 指的是某个函数在某段时间内,无论触发了多少次回调,都只执行最后一次

防抖可以理解为司机等待最后一个人进入后再关门,每次新进一个人,司机就会把计时器清零并重新开始计时

  • 「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务
  • 「1 分钟」就是计时器,它是司机决定「关门」的依据,如果有新的「乘客」上车,将清零并重新计时
  • 「关门」就是最后需要执行的函数

应用:input 输入回调事件添加防抖函数后,只会在停止输入后触发一次

实现方案:使用定时器,函数第一次执行时设定一个定时器,之后调用时发现已经设定过定时器就清空之前的定时器,并重新设定一个新的定时器,如果存在没有被清空的定时器,当定时器计时结束后触发函数执行

posted @ 2022-07-08 11:08  Python喵  阅读(298)  评论(0编辑  收藏  举报