什么是防抖与节流?应用场景举例

145 阅读2分钟

防抖(Debounce)和节流(Throttle)都是前端开发中常用的性能优化技术,用于控制事件触发的频率。它们的区别如下:

  1. 防抖:当事件触发后,延迟一段时间执行回调函数,如果在这段时间内再次触发了同样的事件,会重新计时,重新延迟执行回调函数。简单来说,防抖会等待一段时间,如果在这段时间内没有再次触发事件,才会执行回调函数

  2. 节流:当事件触发后,固定时间间隔内只执行一次回调函数。简单来说,节流会限制事件的触发频率,保证在固定时间间隔内只执行一次回调函数

防抖和节流的应用场景举例如下:

1. 防抖:

  • 搜索框实时搜索:当用户输入搜索关键字时,使用防抖技术可以避免频繁发送请求,只在用户输入完成一段时间后才发送请求。
  • 窗口调整事件:当窗口大小调整时,使用防抖技术可以避免频繁触发回调函数,只在用户停止调整窗口大小一段时间后执行回调函数。
  • 表单验证:当用户输入表单内容时,使用防抖技术可以在用户停止输入一段时间后,再进行表单验证。

2. 节流:

  • 滚动事件:当页面滚动时,使用节流技术可以限制滚动事件的触发频率,减少回调函数的执行次数,提升性能。
  • 鼠标移动事件:当鼠标移动时,使用节流技术可以限制回调函数的执行频率,避免过于频繁的回调函数执行。
  • 点击按钮防止重复提交:当用户点击按钮时,使用节流技术可以限制按钮的点击频率,避免用户多次点击导致重复提交。

防抖和节流可以根据具体的需求和场景选择使用,以提升用户体验和优化性能