Javascript Function Throttling

Question

I want to use a JS Throttle. But i'm struggeling to get it work correctly.

I tried the code from this article: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

But the Throttle does not work as intended, since everytime i click on the button, one "|" is added to the div. No clicks were discarded.

where is the misstake?

function foo() {
	$("#respond").append("|");
}

const throttle = (func, limit) => {
  let inThrottle
  return function() {
    const args = arguments
    const context = this
    if (!inThrottle) {
      func.apply(context, args)
      inThrottle = true
      setTimeout(() => inThrottle = false, limit)
    }
  }
}

var onClick = function() {
    throttle(foo(), 50000);
};

$('#button').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<div id="respond"></div>

Answer 1

In order for throttle(func, limit) to work, there can only be one instance of its product.

The problem is that the onClick function in your example creates a new instance each time it is called.

This makes the underlying inThrottle variable meaningless, as a new copy is created for each click.

The solution is to call one single instance the product of throttle(foo, 50000) directly.

Also, foo itself should be passed (not its product).

See below for a practical example, as well as closures and scope for more info.

// Foo.
const foo = (...args) => {
  $("#respond").append("|");
}

// Throttle.
const throttle = (func, limit) => {
  let inThrottle
  return (...args) => {
    if (!inThrottle) {
      func(...args)
      inThrottle = setTimeout(() => inThrottle = false, limit)
    }
  }
}

// On Click.
const onClick = throttle(foo, 1000)

// Button - Click.
$('#button').click(onClick);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="button" value="Click Me" />
<div id="respond"></div>

Answer 2

Your onClick is creating a new throttled function on every invoke. You have to ensure that is only throttled once

var onClick = function() {
    throttle(foo(), 50000);
};
// TO

var onClick = throttle(foo, 50000);