摆脱卡顿、提升用户体验！防抖节流带你玩转 JavaScript

前端

2024-02-01 21:43:46

揭开防抖和节流的神秘面纱

防抖和节流都是 JavaScript 中用来优化事件处理的函数。它们可以防止函数在短时间内被多次调用，从而提高性能和用户体验。

防抖：让函数从容不迫

防抖可以理解为游戏中的“回城技能”，它允许函数在一段时间内只执行一次，即使在这个时间段内触发了多次。防抖的原理是：在函数被调用时，创建一个计时器，如果在计时器到期之前函数再次被调用，那么就重置计时器，让函数只在计时器到期时执行一次。

节流：让函数井然有序

节流可以理解为游戏中的“普通技能”，它允许函数在一段时间内只执行一次，但每次触发都会执行。节流的原理是：在函数被调用时，创建一个计时器，如果在计时器到期之前函数再次被调用，那么就忽略这次调用，让函数只在计时器到期时执行一次。

JavaScript 中的防抖和节流实现

在 JavaScript 中，防抖和节流可以很容易地实现。以下是如何使用原生 JavaScript 实现防抖和节流：

防抖实现

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

节流实现

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