An ES6 implementation of the throttle function. "Throttling enforces a maximum number of times a function can be called over time. As in 'execute this function at most once every 100 milliseconds.'" - CSS-Tricks (https://css-tricks.com/the-difference-between-throttling-and-debouncing/)

throttle.js

function throttle(callback, wait, immediate = false) {
  let timeout = null 
  let initialCall = true
  
  return function() {
    const callNow = immediate && initialCall
    const next = () => {
      callback.apply(this, arguments)
      timeout = null
    }
    
    if (callNow) { 
      initialCall = false
      next()
    }

    if (!timeout) {
      timeout = setTimeout(next, wait)
    }
  }
}

/**
 * Normal event
 * event      | |      |
 * time     ----------------
 * callback   | |      |
 * 
 * Call search at most once per 300ms while keydown
 * keydown     | |     |  |
 * time     -----------------
 * search          |       | 
 *             |300|   |300|
 */
 
const input = document.getElementById('id')
const handleKeydown = throttle((arg, event) => {
  console.log(`${event.type} for ${arg} has the value of: ${event.target.value}`)
}, 300)

input.addEventListener('keydown', (event) => {
  handleKeydown('input', event)
})

It appears there are varying opinions on throttle functionality. 😄

My version of throttle should:

• execute immediately the first time it's invoked, unlike debounce, which waits until its idle time is exceeded before initially executing. result: immediate visual feedback
• not execute if invoked again before the wait time has been exceeded. result: reduce jank
• queue the latest denied execution to be re-invoked if possible when the wait time has been exceeded. result: ensure final invocation occurs

const throttle = (fn, wait) => {
    let previouslyRun, queuedToRun;

    return function invokeFn(...args) {
        const now = Date.now();

        queuedToRun = clearTimeout(queuedToRun);

        if (!previouslyRun || (now - previouslyRun >= wait)) {
            fn.apply(null, args);
            previouslyRun = now;
        } else {
            queuedToRun = setTimeout(invokeFn.bind(null, ...args), wait - (now - previouslyRun));    
        }
    }
}; 

const test = throttle(wait => { console.log(`INVOKED (${wait})`, Date.now()) }, 100);

for(let i = 0, wait = 0; i < 20; i++) {
    wait += 30;
    setTimeout(() => { test(wait); }, wait)
}

It appears there are varying opinions on throttle functionality. 😄

Right. Your solution also appears to be a throttle. The author's solution, however, appears purely a debounce.

To throttle a function means to ensure that the function is called at most once in a specified time period (for instance, once every 5 seconds).

function throttle(f, t) {
  return function (args) {
    let previousCall = this.lastCall;
    this.lastCall = Date.now();
    if (previousCall === undefined // function is being called for the first time
        || (this.lastCall - previousCall) > t) { // throttle time has elapsed
      f(args);
    }
  }
}

As you just proved... There are varying opinions. 😜

@ankitarora05

To throttle a function means to ensure that the function is called at most once in a specified time period

Not necessarily once. It could be at most X times in a specified time period. So the solution function which throttles a given function should receive 3 params

• the number of times to call (in your case, that is 1)
• the specified period of time
• the callback function itself.

Use RxJs and you'll be happy 😀

Typescript version of throttle function with final and immediate invocations

// Throttle with ensured final and immediate invocations
const throttle = <T extends []> (callback: (..._: T) => void, wait: number): (..._: T) => void => {
    let queuedToRun: NodeJS.Timeout | undefined;
    let previouslyRun: number;
    return function invokeFn(...args: T) {
        const now = Date.now();
        queuedToRun = clearTimeout(queuedToRun) as undefined;
        if (!previouslyRun || (now - previouslyRun >= wait)) {
            callback(...args);
            previouslyRun = now;
        } else {
            queuedToRun = setTimeout(invokeFn.bind(null, ...args), wait - (now - previouslyRun));
        }
    };
};

Thanks to @robertmirro and @FRSgit

Nice one @undergroundwires! But I've skipped leading invocation on purpose, because I was aiming for the simplest implementation. Also, I found out that having this immediate leading method firing is not always a good idea, but that of course depends on a use case.

If we want to write the "fullest" throttle fn I think there should be a possibility to opt out from leading & trailing callback calls. Exactly as they do in lodash.

Here's my version, using TypeScript. It's returning a callback to cancel the timeout, useful if use have to use some cleanup function.

const throttle = <TArgs extends unknown[] = []>(
  callback: (...args: TArgs) => void
): ((ms: number, ...args: TArgs) => (() => void)) => {
  let timeout: NodeJS.Timeout | undefined;
  let lastArgs: TArgs;

  const cancel = () => {
    clearTimeout(timeout);
  };

  return (ms, ...args) => {
    lastArgs = args;

    if (!timeout) {
      timeout = setTimeout(() => {
        callback(...lastArgs);
        timeout = undefined;
      }, ms);
    }

    return cancel;
  };
};

Usage:

const cb = (n) => console.log(n);
const throttledCb = throttle(cb);
throttledCb(100, 1);
// wait 50ms
throttledCb(100, 2);
// wait 50ms
// prints 2