事件节流与函数防抖：从防抖到节流，逐层剖析触发事件处理技术

2024-01-13 07:56:01

在前端开发中，为了响应用户的交互行为或系统事件，我们经常会绑定一些持续触发的事件，比如调整浏览器窗口大小（resize）、滚动页面（scroll）、移动鼠标（mousemove）等等。然而，有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数，因为这可能会导致不必要的性能损耗，甚至影响用户体验。

为了解决这个问题，前端开发人员提出了两种常用的技术：事件节流（Event Throttling）和函数防抖（Debouncing）。它们都是通过控制事件处理函数的执行频率来达到优化性能和提升用户体验的目的，但二者在实现方式和应用场景上存在一定的差异。

事件节流

事件节流是一种通过控制事件处理函数的执行频率来限制其在一定时间间隔内最多执行一次的技术。无论事件在该时间间隔内触发多少次，事件处理函数只会被执行一次。这种技术常用于处理高频触发的事件，例如调整浏览器窗口大小、滚动页面等。

事件节流的实现方式比较简单，通常使用定时器（setTimeout或setInterval）来控制事件处理函数的执行。当事件被触发时，会启动一个定时器，如果在定时器到期之前事件再次被触发，则重置定时器的计时，以此来保证事件处理函数在一定时间间隔内只被执行一次。

函数防抖

函数防抖是一种通过延迟事件处理函数的执行来减少函数调用的次数的技术。与事件节流不同，函数防抖并不会限制事件处理函数的执行频率，而是延迟其执行。当事件被触发时，会启动一个定时器，如果在定时器到期之前事件再次被触发，则重置定时器的计时，以此来延迟事件处理函数的执行。只有当事件在一段时间内不再被触发时，事件处理函数才会被执行。

函数防抖常用于处理需要一定延迟才能执行的事件，例如搜索框中的文本输入、表单中的数据验证等。通过延迟执行事件处理函数，可以减少不必要的函数调用，提高代码性能，并优化用户体验。

事件节流与函数防抖的应用场景

事件节流和函数防抖都是优化事件处理的有效技术，但它们在应用场景上存在一定的差异。一般来说，事件节流更适合处理高频触发的事件，例如调整浏览器窗口大小、滚动页面等。而函数防抖更适合处理需要一定延迟才能执行的事件，例如搜索框中的文本输入、表单中的数据验证等。

为了更好地理解事件节流和函数防抖的应用场景，我们举几个具体的例子：

事件节流：
- 调整浏览器窗口大小时，触发 resize 事件。使用事件节流可以限制 resize 事件处理函数在一定时间间隔内最多执行一次，从而避免频繁触发浏览器重新渲染。
- 滚动页面时，触发 scroll 事件。使用事件节流可以限制 scroll 事件处理函数在一定时间间隔内最多执行一次，从而减少不必要的函数调用，提高页面滚动性能。
函数防抖：
- 在搜索框中输入文本时，触发 input 事件。使用函数防抖可以延迟 input 事件处理函数的执行，直到用户停止输入一段时间后才执行。这样可以减少不必要的搜索请求，提高搜索性能，并优化用户体验。
- 在表单中输入数据时，触发 change 事件。使用函数防抖可以延迟 change 事件处理函数的执行，直到用户停止输入一段时间后才执行。这样可以减少不必要的表单验证请求，提高表单提交性能，并优化用户体验。