返回

揭秘防抖节流（二）：深入剖析防抖实现

前端

防抖和节流是前端开发中常见的优化手段，前者确保函数只在事件触发后特定时间间隔内执行一次，后者则限制函数在规定时间段内至多执行一次 。在上一篇中，我们已对它们的基本原理和应用场景进行了探讨，本篇将深入剖析防抖函数的具体实现。

首先，我们来看看防抖函数中涉及的一个未曾讨论过的函数——restArguments。该函数的作用是收集函数调用时传递的所有剩余参数，形成一个数组，从而简化函数的实现。

function restArguments(func, startIndex) {
  startIndex = startIndex || 0;
  return function() {
    var length = Math.max(arguments.length - startIndex, 0);
    var rest = Array(length);
    for (var index = 0; index < length; index++) {
      rest[index] = arguments[index + startIndex];
    }
    return func.apply(this, rest);
  };
}

接着，我们进入防抖函数的实现：

function debounce(func, wait, immediate) {
  var timeout, result;

  var later = function() {
    timeout = null;
    if (!immediate) result = func.apply(this, arguments);
  };

  var debounced = restArguments(later, 1);

  debounced.cancel = function() {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
}

让我们逐行解读代码：

  • timeout和result两个变量用于保存定时器和函数执行结果。
  • later函数将在指定时间间隔（wait）后执行，且当immediate为false时（即非立即执行模式），才会执行func并返回结果。
  • debounced是防抖函数，实际上是对later函数进行了包装。restArguments确保了当debounced被调用时，剩余参数会被收集到一个数组中，并作为later函数的参数传递。
  • debounced.cancel()方法用于取消正在进行的定时器，防止later函数执行。