揭秘防抖节流的奥妙：巧妙驾驭事件响应，提升用户体验

前端

2023-12-19 22:43:02

防抖节流之妙用

拨云见日：防抖与节流的原理之谜

要理解防抖和节流的奥妙，首先需要了解它们的原理。

防抖

防抖的原理是：在事件被触发 n 秒后再执行回调，如果在这 n 秒内又被触发，则重新计时。

通俗地说，防抖就像是一个“水龙头”。当您打开水龙头时，水不会立即流出，而是需要等一会儿。如果在这段时间内您又打开了水龙头，则重新计时。

节流

节流的原理是：在一定时间间隔内，只执行一次回调。

通俗地说，节流就像是一个“门卫”。当您进入大门时，门卫会检查您是否已经进入过。如果已经进入过，则拒绝您再次进入。

异曲同工：防抖与节流的区别与联系

虽然防抖和节流都涉及事件响应的优化，但它们之间也存在着一些区别。

触发时机 ：防抖是在事件被触发 n 秒后执行回调，而节流是在一定时间间隔内只执行一次回调。
执行次数 ：防抖在 n 秒内只执行一次回调，而节流在一定时间间隔内可以执行多次回调。

珠联璧合：防抖与节流的应用场景

防抖和节流都有着广泛的应用场景，以下是一些典型的例子：

防抖：按钮提交场景：防止多次提交按钮，只执行最后提交的一次；搜索框连续输入场景：防止连续发送请求，只发送最后一次输入的内容。
节流：窗口滚动场景：防止连续触发滚动事件，只在滚动停止后执行回调；鼠标移动场景：防止连续触发鼠标移动事件，只在鼠标停止移动后执行回调。

锦上添花：防抖与节流的代码实现

在 JavaScript 中，防抖和节流可以很容易地实现。

防抖

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

节流

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