页面渲染丝滑如瀑，防抖和节流保驾护航

前端

2023-12-19 20:58:40

防抖和节流简介

防抖和节流都是用来优化事件处理的技巧。它们都可以减少不必要的函数调用，从而提高页面的响应速度。

防抖：防抖是一种用来处理高频触发的事件的技巧。它可以确保在一个指定的时间间隔内，事件只会被触发一次。例如，当用户在输入框中输入内容时，输入事件会高频触发。如果我们对输入事件进行防抖处理，就可以确保在用户停止输入一段时间后，事件才被触发一次。
节流：节流是一种用来处理连续触发的事件的技巧。它可以确保在一个指定的时间间隔内，事件只会被触发一次。例如，当用户在页面上滚动时，滚动事件会连续触发。如果我们对滚动事件进行节流处理，就可以确保在用户滚动一段时间后，事件才被触发一次。

防抖和节流的应用

防抖和节流在前端开发中都有广泛的应用。以下是它们的一些典型应用场景：

输入框实时监听输入事件：当用户在输入框中输入内容时，输入事件会高频触发。如果我们对输入事件进行防抖处理，就可以确保在用户停止输入一段时间后，事件才被触发。这样可以减少不必要的函数调用，提高页面的响应速度。
页面中常见的监听浏览器滚动事件：当用户在页面上滚动时，滚动事件会连续触发。如果我们对滚动事件进行节流处理，就可以确保在用户滚动一段时间后，事件才被触发。这样可以减少不必要的函数调用，提高页面的响应速度。
窗口的 onresize 事件：当用户调整浏览器的窗口大小时，onresize 事件会触发。如果我们对 onresize 事件进行节流处理，就可以确保在用户调整窗口大小一段时间后，事件才被触发。这样可以减少不必要的函数调用，提高页面的响应速度。

防抖和节流的实现

防抖和节流都可以使用 JavaScript 实现。以下是它们各自的实现方式：

防抖：

function debounce(func, wait) {
  let timeout;
  return function (...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

节流：

function throttle(func, wait) {
  let lastTime = 0;
  return function (...args) {
    const context = this;
    const now = Date.now();
    if (now - lastTime >= wait) {
      func.apply(context, args);
      lastTime = now;
    }
  };
}