函数的防抖和节流：超越想象的流畅编程体验

2023-12-02 07:44:39

在前端开发的舞台上，我们经常需要处理各种事件，而一些事件会以极快的速度连续触发，比如鼠标移动、窗口调整大小等。如果不加以处理，这些密集触发的事件可能会导致浏览器卡顿，甚至崩溃。为了解决这个问题，函数的防抖和节流闪亮登场！

函数的防抖与节流 ，这两个术语乍一听似乎有些拗口，但它们在前端开发中的重要性却不容忽视。掌握了这两个技巧，你将能够显著提升应用的性能和用户体验。

函数的防抖

函数的防抖（debounce）是一种优化技术，它可以有效防止函数在短时间内被重复调用。当一个事件被触发后，防抖函数不会立即执行，而是等待一段时间。在这段时间内，如果事件再次被触发，防抖函数就会重新计时。只有在计时器走完之后，防抖函数才会真正执行。

实现原理 ：

function debounce(func, delay) {
  let timer;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

使用场景 ：

输入框的搜索建议。当用户在输入框中输入文字时，不需要在每个字符输入后都发起搜索请求，而是等待用户停止输入一段时间后才发起请求。这样可以有效减少服务器的压力，并提高用户体验。
窗口大小改变。当用户调整浏览器窗口大小时，不需要在每次调整后都重新渲染页面。而是等待用户停止调整一段时间后才重新渲染页面。这样可以减少浏览器的重绘次数，提高性能。

函数的节流

函数的节流（throttle）与防抖类似，也是一种优化技术。不同之处在于，节流函数在一段时间内只允许执行一次，即使事件在该段时间内被多次触发。

实现原理 ：

function throttle(func, delay) {
  let canRun = true;
  return function () {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}