函数防抖与节流，一个你从未有过的前端体验

2023-09-29 19:25:50

函数防抖

函数防抖（debounce）是一种技术，用于限制函数在指定的时间间隔内只调用一次。也就是说，如果函数在指定的时间间隔内被多次调用，那么只有最后一次调用会被执行。

函数防抖的实现原理很简单，我们可以使用一个定时器来控制函数的调用。当函数被调用时，我们先启动一个定时器，如果在定时器到期之前函数又被调用，那么我们就重新启动定时器。这样，函数只有在最后一次调用后经过了指定的时间间隔才会被执行。

函数防抖的使用场景有很多，比如：

搜索框中的自动补全功能。当用户在搜索框中输入时，我们不需要立即发送请求去获取搜索结果，而是可以先启动一个定时器。如果用户在指定的时间间隔内没有继续输入，那么我们就发送请求去获取搜索结果。这样可以减少不必要的请求，提高性能。
表单的验证。当用户在表单中输入时，我们不需要立即验证输入的合法性，而是可以先启动一个定时器。如果用户在指定的时间间隔内没有继续输入，那么我们就验证输入的合法性。这样可以减少不必要的验证，提高性能。
滚动的事件处理。当用户滚动页面时，我们不需要立即处理滚动的事件，而是可以先启动一个定时器。如果用户在指定的时间间隔内没有继续滚动，那么我们就处理滚动的事件。这样可以减少不必要的事件处理，提高性能。

函数节流

函数节流（throttle）是一种技术，用于限制函数在指定的时间间隔内只调用一次。也就是说，如果函数在指定的时间间隔内被多次调用，那么只有第一次调用会被执行。

函数节流的实现原理也很简单，我们可以使用一个标记位来控制函数的调用。当函数被调用时，我们先检查标记位是否为true。如果标记位为true，那么我们就直接返回，不执行函数。如果标记位为false，那么我们就将标记位设置为true，执行函数，然后在指定的时间间隔后将标记位重置为false。

函数节流的使用场景有很多，比如：

窗口大小改变的事件处理。当窗口的大小改变时，我们不需要立即重新计算页面的布局，而是可以先启动一个定时器。如果窗口的大小在指定的时间间隔内没有继续改变，那么我们就重新计算页面的布局。这样可以减少不必要的布局计算，提高性能。
鼠标移动的事件处理。当鼠标移动时，我们不需要立即更新鼠标的位置，而是可以先启动一个定时器。如果鼠标的位置在指定的时间间隔内没有继续改变，那么我们就更新鼠标的位置。这样可以减少不必要的事件处理，提高性能。
视频播放的控制。当用户在视频播放器中拖动播放进度条时，我们不需要立即更新视频的播放进度，而是可以先启动一个定时器。如果播放进度条在指定的时间间隔内没有继续被拖动，那么我们就更新视频的播放进度。这样可以减少不必要的视频播放，提高性能。