BFE.devAI解答 - JavaScript 代码题
7. 手写debounce()并支持leading 和 trailing

解题思路：

• 和debounce类似，我们需要定义一个守卫函数来决定延迟后函数执行的方案。
• 然后需要根据leading和trailing来判断如何处理函数的执行。如果leading是true，则在起始时间执行函数，在trailing是true的情况下，函数延迟执行。
• 判断这些条件并实现它们，我们需要使用条件和三元操作符多次运算。一些标准的算术操作在其中也很重要。

初学者实现代码如下（打开注释）：

function debounce(callback, time, options) {
  let timeoutId;
  
  return function(...args) {
    const leadingResult = 
      options?.leading && !timeoutId 
        ? callback.apply(this, args) 
        : undefined;
        
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      const trailingResult = 
        options?.trailing && !options?.leading 
          ? callback.apply(this, args)
          : undefined;
      
      timeoutId = undefined;
      
      console.log({ leadingResult, trailingResult }); // log result
    }, time);
    
    console.log({ leadingResult }); // log result
    return leadingResult; // return result
  };
}

完整代码：

function throttle(callback, time, options) {
  let shouldWait = false;
  let timerId = undefined;
  
  return function(...args) {
    const shouldExecuteLeading = options?.leading && timerId === undefined;
    const shouldExecuteTrailing = 
      !shouldWait && options?.trailing && timerId !== undefined;
    const shouldExecute = 
      shouldExecuteLeading || shouldExecuteTrailing;
    
    if (shouldExecute) {
      callback.apply(this, args);
      
      timerId = setTimeout(() => {
        timerId = undefined;      
      }, time);
    } else {
      clearTimeout(timerId);
      
      timerId = setTimeout(() => {
        callback.apply(this, args);
        
        timerId = undefined;
      }, time);
    }
    
    shouldWait = true;
    
    setTimeout(() => {
      shouldWait = false;    
    }, time);
  };
}

可以看到我们添加了两个参数:

function throttle(callback, time, options) {
  ...
}

我们用一个布尔值来确认函数是否可以执行：

let shouldWait = false;

当然这个值最开始是false的。这个值不能只在定时器里使用，而是在下一次瞬间也需重置。

执行函数的前提是满足leading或trailing两个条件之一。我们需要检查 leading的情况并判断定时器是否存在.

const shouldExecuteLeading = options?.leading && timerId === undefined;

这里它确实需要是等于undefined还是null.

如果它们不同到底表示什么并且为何？如果经过允许它等于null的测试，那么null会被错误地解释为函数未缓存，出现了一个额外的错误。由此得出结论:undefined是唯一的正确选项.

然后，我们应该在没有延迟的情况下允许trailing处理。如果函数已经被delay，就不需要再激活它了。

const shouldExecuteTrailing = 
  !shouldWait && options?.trailing && timerId !== undefined;

我们现在可以用它定义判断逻辑：

const shouldExecute = 
  shouldExecuteLeading || shouldExecuteTrailing;

if (shouldExecute) {
  // execute immediately
} else {
  // delay
}

现在让我们来看看到底是哪里执行的。

Leading activation

leading回调函数的调用：

if (shouldExecuteLeading) {
  callback.apply(this, args);
  
  timerId = setTimeout(() => {
    timerId = undefined;      
  }, time);
}

这里真的很简单：执行函数，并将计时器建立绑定的函数进行更新。

Trailing activation

callback函数移动到轮廓线下的时间取决于你地等待时间。

if (!shouldWait) {
  if (shouldExecuteTrailing) {
    clearTimeout(timerId);
    
    callback.apply(this, args);
    
    timerId = setTimeout(() => {
      timerId = undefined;      
    }, time);
  } else {
    clearTimeout(timerId);
    
    timerId = setTimeout(() => {
      callback.apply(this, args);
      
      timerId = undefined;
    }, time);
  }
}

我们从条件中剥离了其他变量，这使得它更具意义。如果我们需要激活trailing状态的回调函数，我们必须从调度器中拿出定时器，触发函数调用，以便后续函数不会再执行。

对于拖尾函数，我们现在有两种方式定义：

• 如果其满足shouldExecuteTrailing条件，就直接立即激活。
• 如果这不是leading callback，等待后执行。

无论我们以哪种方式执行函数，最后一步都是将计时器重置为undefined：

timerId = undefined;

请注意，无论leading状态如何，每个计时器都需要执行delay，因为正如我之前所说的，前一个可能被完全延迟，进而时间增加。

如果要重置状态，则需要将一个should等待的布尔值延迟到下一个时间周期：

shouldWait = true;
  
setTimeout(() => {
  shouldWait = false;    
}, time);

这样做让我们清楚什么时候再次开始。可能最好不要延迟，因为问题只会变得更多。但是，如果在下一次的“形状线下方”例如需要10毫秒，我们在一次测试中看到只有13个重复。我们从来没有达到过100次。异步代码与异步调度器的所需的封装相同。