BFE.devでのAI解答例 - JavaScript コーディング問題
4. throttle()を実装する
以下は、JavaScriptのthrottle()
関数の実装例です。
function throttle(func, delay) { let timerId = null; let lastArgs = null; return function throttled(...args) { lastArgs = args; if (!timerId) { timerId = setTimeout(() => { func.apply(this, lastArgs); lastArgs = null; timerId = null; }, delay); } };}
この実装では、timerId
とlastArgs
という2つの変数を使用して、スロットルされたfunc
関数の呼び出しを遅らせます。lastArgs
変数には、最後に渡された引数の配列が保存されます。timerId
変数は、遅延タイマーのIDを保存します。
まず、lastArgs
変数に引数を保存し、timerId
が未定義の場合(つまり、func()
の呼び出しが遅延されていない場合)は、setTimeout()
を使用してfunc()
を呼び出し、lastArgs
変数をクリアします。timerId
変数には、遅延タイマーのIDが保存されます。
次に、この関数を返された関数(スロットルされた関数)として使用します。この関数は、変数args
を引数として受け取り、最後に渡された引数の配列をlastArgs
変数に保存します。それから、if
ステートメントを使用して、遅延タイマーが未定義である場合にのみsetTimeout()
を呼び出します。
この実装では、lastArgs
変数が常に最新であるため、スロットルされた関数が呼び出されたときに渡される引数が常に最新であることが保証されます。また、setTimeout()
によって代入された変数timerId
によって、遅延タイマーを取り消すことができます。