GreatFrontend - Throttle

2024-01-15 @ushimaru08

What is Throttle?

Throttling is a technique used to control how many times we allow a function to be executed over time. When a JavaScript function is said to be throttled with a wait time of X milliseconds, it can only be invoked at most once every X milliseconds. The callback is invoked immediately and cannot be invoked again for the rest of the wait duration.

指定した秒数の間に、func が一回しか実行されないことを保証する。debounce が最後のアクションから指定時間経過後に func を実行するのに対して、throttle では最初に func を実行してから、指定時間が経過した時点で、func を実行する。それにより、指定された時間の間、func が重複されて実行されることを防ぐ。 例えば、スクロールイベントを検知して無限スクロールを実現したい場合などに利用する。


debounce と同じく、func と ms を受け取る。

let i = 0;
function increment() {
const throttledIncrement = throttle(increment, 100);


shouldThrottle の bool の値に応じて、func の実行をコントロールする。

 * @callback func
 * @param {number} wait
 * @return {Function}
export default function throttle(func, wait = 0) {
  let shouldThrottle = false;

  return function (...args) {
    if (shouldThrottle) return;
    shouldThrottle = true;
    setTimeout(function () {
      shouldThrottle = false;
    }, wait);

    func.apply(this, args);