轻松掌握 JavaScript 防抖与节流，告别 UI 卡顿

前端

2023-01-03 15:24:21

巧用 JavaScript 防抖与节流：应对事件频繁触发难题

作为一名网页前端工程师，我们常常面临各种挑战，其中之一就是如何处理快速触发的事件，以防止页面卡顿和性能下降。例如，用户在输入框中快速输入时，频繁触发的搜索请求会让页面响应缓慢；或者，用户滚动页面时，不断加载的元素会造成页面卡顿。

为了解决这些问题，JavaScript 中的防抖和节流技术应运而生。这两项技术可以控制事件的触发频率，从而优化页面性能，提升用户体验。

防抖：避免重复触发

想象一下，当用户在搜索框中输入内容时，我们希望每隔一段时间才执行一次搜索请求。防抖技术就能帮我们实现这一点。

其原理是，当用户输入时，我们先开启一个计时器。如果在计时器结束之前，用户再次输入，则取消上一次计时器，重新开启一个新的计时器。只有当计时器结束时，才会真正执行搜索请求。

节流：控制触发频率

与防抖类似，节流也用于控制事件触发频率。但其机制略有不同。

节流的原理是，当事件触发时，我们先判断自上次触发以来是否已超过设定的时间间隔。如果超过，则执行该事件；否则，忽略这次触发。

应用场景

防抖和节流技术在各种场景中都有用武之地：

搜索框自动补全 ：避免用户输入时频繁触发搜索请求，提高搜索效率。
表单实时验证 ：在用户输入时实时验证表单数据，减少用户提交无效表单的可能性。
页面滚动元素加载 ：控制滚动过程中元素加载的频率，避免页面卡顿。
按钮点击事件处理 ：防止用户重复快速点击按钮，导致不必要的操作。

实现方式

在 JavaScript 中，可以使用 lodash 或 underscore 等库来轻松实现防抖和节流功能。这些库提供了便捷易用的 API。

例如，使用 lodash 的 debounce 函数实现防抖：

import { debounce } from 'lodash';

function search(query) {
  // 发送搜索请求
}

const debouncedSearch = debounce(search, 500);

document.getElementById('search-input').addEventListener('input', (e) => {
  const query = e.target.value;
  debouncedSearch(query);
});