让鼠标不再敏感：探索防抖与节流的奥秘

前端

2024-01-15 02:24:38

鼠标的敏感性问题

在网页开发中，我们经常会遇到这样的情况：当用户在网页上移动鼠标时，某些元素会做出相应的反应，比如改变颜色、大小或位置。这种交互效果虽然很常见，但如果处理不当，可能会导致网页性能下降，甚至出现卡顿。

这是因为，当用户移动鼠标时，鼠标事件会不断触发，如果我们每次都对这些事件做出反应，就会给浏览器带来很大的压力，导致网页卡顿。为了解决这个问题，我们可以使用防抖和节流技术。

防抖与节流的基本原理

防抖和节流都是用来控制函数的执行频率的，但它们的工作原理不同。

防抖

防抖的原理是，当事件在规定时间内连续触发时，只执行一次函数。如果在规定时间内事件没有再次触发，则函数不会执行。

节流

节流的原理是，当事件在规定时间内连续触发时，只执行一次函数。但与防抖不同的是，节流会保证在规定时间内函数至少执行一次。

防抖与节流的应用场景

防抖和节流可以应用于各种场景，比如：

当用户输入内容时，只在用户停止输入一段时间后才触发搜索请求。
当用户滚动网页时，只在用户停止滚动一段时间后才加载新的内容。
当用户移动鼠标时，只在用户停止移动鼠标一段时间后才改变元素的样式。

防抖与节流的实现

在 JavaScript 中，我们可以使用 setTimeout() 和 clearTimeout() 方法来实现防抖和节流。

防抖的实现

function debounce(func, wait) {
  let timeout;

  return function (...args) {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
      func(...args);
    }, wait);
  };
}

节流的实现

function throttle(func, wait) {
  let canRun = true;

  return function (...args) {
    if (!canRun) {
      return;
    }

    canRun = false;

    setTimeout(() => {
      func(...args);
      canRun = true;
    }, wait);
  };
}