BFE.devでのAI解答例 - JavaScript コーディング問題
7. leading & trailingをサポートするdebounce()を実装する

function debounce(func, wait, option = { leading: false, trailing: true }) {
  let timeoutId;
  let lastArgs;
  let lastThis;
  let maxWait;
  let result;
  let lastCallTime = 0;
  let lastInvokeTime = 0;

  const leadingCall = () => {
    lastInvokeTime = Date.now();
    timeoutId = setTimeout(timerExpired, wait);
    return option.leading ? invokeFunc(lastArgs, lastThis) : result;
  };

  const timerExpired = () => {
    const timeSinceLastCall = Date.now() - lastCallTime;
    const timeSinceLastInvoke = Date.now() - lastInvokeTime;

    if (timeSinceLastCall < wait && timeSinceLastCall >= 0) {
      timeoutId = setTimeout(timerExpired, wait - timeSinceLastCall);
    } else {
      timeoutId = null;
      if (!option.leading) {
        result = invokeFunc(lastArgs, lastThis);
      }
      if (!timeoutId && maxWait !== wait) {
        result = invokeFunc(lastArgs, lastThis);
      }
    }
  };

  const invokeFunc = (args, context) => {
    lastInvokeTime = Date.now();
    lastThis = context;
    lastArgs = args;
    lastCallTime = lastInvokeTime;
    return func.apply(context, args);
  };

  const leadingTimerExpired = () => {
    timeoutId = null;
    result = invokeFunc(lastArgs, lastThis);
  };

  const debounced = (...args) => {
    lastArgs = args;
    const time = Date.now();
    lastThis = this;

    if (!lastInvokeTime && option.leading === false) {
      lastInvokeTime = time;
    }

    const timeSinceLastCall = time - lastCallTime;
    if (timeSinceLastCall >= wait || timeSinceLastCall < 0) {
      if (timeoutId) {
        clearTimeout(timeoutId);
        timeoutId = null;
      }
      lastCallTime = time;
      result = invokeFunc(args, this);
    } else if (!timeoutId && option.trailing !== false) {
      timeoutId = setTimeout(
        option.leading === false ? leadingTimerExpired : timerExpired,
        wait - timeSinceLastCall
      );
    }

    if (option.maxWait !== undefined) {
      maxWait = Number(option.maxWait);
      const timeSinceLastInvoke = time - lastInvokeTime;
      if (timeSinceLastInvoke >= maxWait || timeSinceLastInvoke < 0) {
        invokeFunc(args, this);
      } else if (!timeoutId) {
        timeoutId = setTimeout(timerExpired, maxWait - timeSinceLastInvoke);
      }
    }

    return result;
  };

  debounced.cancel = () => {
    clearTimeout(timeoutId);
    lastInvokeTime = 0;
    lastArgs = null;
    lastThis = null;
    lastCallTime = 0;
    timeoutId = null;
  };

  debounced.flush = () => {
    if (timeoutId) {
      clearTimeout(timeoutId);
      timerExpired();
    }
  };

  return debounced;
}

解説：

lodash.debounce()ではない手作りのdebounce()を実装する続きです。新しい変数と分岐がたくさんあるので、注意深く読んで実装を見てください。

Code Breakdown:

1. 関数debounce()を宣言し、以下の引数を受け取ります:
   1. func (Function): 処理したい関数。
   2. wait (Number): 待機する時間(ミリ秒)。
   3. option.leading (Boolean): funcの1回目を呼び出すかどうか。デフォルトは false。
   4. option.trailing (Boolean): 待機タイマーの後にfuncを呼び出すかどうか。デフォルトは true。
2. timeoutId変数を宣言し、nullに設定します。
3. lastArgs変数を宣言し、空配列に設定します。これは、実行される関数に渡される引数を格納します。
4. lastThis変数を宣言し、nullに設定します。これは、実行される関数のコンテキストを格納します。
5. maxWait変数を宣言し、nullに設定します。
6. result変数を宣言し、undefinedに設定します。
7. lastCallTime変数を宣言し、0に設定します。
8. lastInvokeTime変数を宣言し、0に設定します。
9. leadingCall()関数を宣言し、以下の手順で行います。
   1. Date.now()を呼び出し、現在時刻を取得します。これはlastInvokeTimeに保存されます。
   2. setTimeout() を使用して、 waitミリ秒後に timerExpired()関数を呼び出します。これは timeoutId に保存されます。
   3. もし option.leading が true なら、invokeFunc() を呼び出して、 result を返します。 そうでなければ resultは undefinedのままです。
10. timerExpired()関数を宣言します。
    1. Date.now()を呼び出して、lastCallTimeから現在時刻までの経過時間を取得します。
    2. Date.now()を呼び出して、lastInvokeTimeから現在時刻までの経過時間を取得します。
    3. もし wait - timeSinceLastCallが0以上である場合で、timeoutIdがnullである場合は、 setTimeout()を使って wait - timeSinceLastCall時間後に timerExpired()関数を呼び出します。
    4. timeoutIdがnullである場合、 option.leadingがfalseではない場合は、 resultを invokeFunc()から呼び出します。
    5. !timeoutIdかつmaxWaitがwaitと異なる場合、 resultを invokeFunc(lastArgs, lastThis)から呼び出します。
11. invokeFunc(args, context)関数を宣言します。
    1. Date.now()を呼び出して、現在時刻を取得します。これは、lastInvokeTimeに保存されます。
    2. lastThisにcontextをセットします。
    3. lastArgsに argsをセットします。
    4. lastCallTimeを lastInvokeTimeに設定し、それによってこれらの変数が一致するようにします。
    5. contextと同じthisでfuncを実行して、その結果を返します。
12. leadingTimerExpired()関数を宣言し、 resultをinvokeFunc()から呼び出し、 timeoutIdをnullに設定します。
13. lastCallTime、 lastArgs、 lastThis、 lastInvokeTime、timeoutIdの値を最初の状態にリセットするcancel()関数を宣言します。
14. timeoutIdがある場合、 timerExpired()関数を直ちに呼び出して、 resultを返すflush()関数を宣言します。
15. debounced関数を宣言し、以下の手順で行います。
    1. argsを lastArgsに設定しましょう。
    2. Date.now()を呼び出して現在時刻を取得します。これは time に保存されます。
    3. thisを lastThisに設定します。
    4. option.leadingがfalseで lastInvokeTimeが nullである場合は、 lastInvokeTimeにtimeを保存します。
    5. timeSinceLastCallを計算し、 waitよりも大きいまたは0未満である場合は、以下の順番で実行します。
       1. timeoutIdがある場合（前回のタイムアウトがまだ働いている場合）、clearTimeout()関数を呼び出してタイムアウトをキャンセルし、 timeoutIdをnullに設定します。
       2. lastCallTimeに timeを設定します。
       3. resultに invokeFunc(args, this)を設定します。
    6. timeoutIdがnullでかつoption.trailingがfalseではない場合、以下の手順で実行してください。
       1. setTimeout()を使用して、 wait - timeSinceLastCall時間後にleadingTimerExpired()かtimerExpired()を呼び出します。前者はoption.leadingがfalseのときで、後者はoption.leadingがfalseでない場合です。それらのうち、最初の一回だけが実行されます。
       2. timeoutIdを設定します。
    7. option.maxWaitが存在する場合は、以下の手順で実行してください。
       1. maxWaitに option.maxWait を Number()関数を使って変換します。
       2. timeSinceLastInvokeを計算し、 maxWait以上であるか、または0未満である場合、 invokeFunc(args, this)を呼び出しします。
       3. timeoutIdがnullである場合は、以下の手順で実行してください。
          1. setTimeout()を使用して、 maxWait -timeSinceLastInvoke時間後に timerExpired()を呼び出します。
          2. timeoutIdを設定します。
    8. resultを返します。
16. cancel()とflush()メソッドを、それぞれキャンセルと即座に呼び出すように debounced関数に追加します。
17. debounced関数を返します。