防抖节流的实现：用拖拽事件+键盘事件模拟场景

2023-11-06 10:42:39

前言

在前端开发中，我们经常会遇到需要处理用户输入的情况，比如在搜索框中输入内容时，需要对输入的关键词进行实时查询；或者在拖拽元素时，需要实时更新元素的位置。这些场景中，如果我们对用户的每一次输入或操作都进行处理，可能会导致性能问题，因为频繁的函数调用会消耗大量的计算资源，从而导致页面卡顿或延迟。

为了解决这个问题，我们可以使用防抖和节流这两个技巧来优化性能。防抖可以防止函数在短时间内被重复调用，而节流可以限制函数在一定时间内只被调用一次。通过使用这两个技巧，我们可以有效地减少函数调用的次数，从而提高页面的性能和响应速度。

防抖

防抖的原理是，在一段时间内只执行一次函数，如果在规定的时间内函数被再次调用，则取消之前的调用，只执行最后一次调用。这样可以防止函数在短时间内被重复调用，从而减少不必要的计算量。

实现防抖的方法有很多，最常用的方法之一是使用定时器。我们可以使用setTimeout()函数来创建一个定时器，在规定的时间内，如果函数没有被再次调用，则执行函数；如果函数在规定的时间内被再次调用，则取消之前的定时器，并重新创建一个新的定时器。

以下是一个使用定时器实现防抖的简单示例：

function debounce(func, wait) {
  let timer;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func(...args);
      timer = null;
    }, wait);
  };
}

在上面的示例中，debounce()函数接受两个参数：func是要防抖的函数，wait是防抖的时间间隔（单位是毫秒）。当debounce()函数被调用时，它会创建一个定时器，并在wait毫秒后执行func函数。如果在wait毫秒内debounce()函数被再次调用，则会取消之前的定时器，并重新创建一个新的定时器。这样，func函数只会在一秒内被执行一次。

节流

节流的原理是，在一定的时间间隔内只执行一次函数。如果在规定的时间间隔内函数被再次调用，则忽略这些调用，只执行最后一次调用。这样可以限制函数在一定时间内只被调用一次，从而减少不必要的计算量。

实现节流的方法有很多，最常用的方法之一是使用时间戳。我们可以使用Date.now()函数来获取当前的时间戳，并在函数被调用时，比较当前的时间戳和上一次函数被调用时的的时间戳。如果当前的时间戳与上一次函数被调用时的的时间戳相差超过规定的时间间隔，则执行函数；否则，忽略此次调用。

以下是一个使用时间戳实现节流的简单示例：

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

在上面的示例中，throttle()函数接受两个参数：func是要节流的函数，wait是节流的时间间隔（单位是毫秒）。当throttle()函数被调用时，它会获取当前的时间戳，并与上一次函数被调用时的的时间戳进行比较。如果当前的时间戳与上一次函数被调用时的的时间戳相差超过wait毫秒，则执行函数；否则，忽略此次调用。这样，func函数只会在一秒内被执行一次。