节流防抖(节流阀)

346 阅读2分钟

一. 节流阀

核心思路:利用回调函数,添加变量的控制,锁住函数或解锁函数

等上一个动画播放完毕之后才会执行下一个动画—— 让事件无法连续触发。

应用场景:在轮播图中,当点击按钮,图片播放到下一张,在图片转换的过程中,点击按钮是无效的;一般是设置一个布尔值 flag 来控制,转换图片事件被触发之后,事件执行体的最开始 flag = flase, 在事件执行体结束之后 flag = true ,来充当节流阀。

二. 节流 和 防抖

随着IT 行业的发展,逐渐出现了设计封装节流防抖函数的工具库,例如 lodash...

节流函数(throttle)

  1. 节流函数的原理:处理程序一次执行之后,规定的间隔时间内不触发该函数
  2. 手写节流函数(只实现以下功能,有待完善)
    • 间隔时间内不触发响应函数
    • 第一次会触发响应函数
    • 最后一次会触发响应函数

思路

  1. 手写节流函数 ,处理程序执行一次后,规定的间隔时间内不触发该函数
  2. 间隔时间 = (触发时间 - 上一次执行的时间)
  3. 第一次触发函数需要执行处理程序吗? leading控制第一次触发函数是否执行处理程序
  4. 最后一次触发函数 remaintime > 0,最后一次需要执行处理程序吗??traling控制最后一个触发函数是否执行处理程序

防抖函数(debounce)

  1. 防抖函数的原理: 当事件触发时,相应的函数不会直接执行,而是会等待一段时间,当事件被密集触发时,函数的执行会被频繁推迟,只有等待一段时间后没有事件被触发,才会执行响应函数执行体。
  2. 手写防抖函数(有待完善)
    • 事件推迟

思路

  1. 设置定时器。每次触发事件,都会进入计时读秒任务(宏任务)
  2. 间隔时间内,再次触发该事件时,删除之前的定时器任务,重新开始计时读秒