title: Javascript Function Throttling
body: <p>I want to use a JS Throttle. But i'm struggeling to get it work correctly.</p>
  
  <p>I tried the code from this article:
  <a href="https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf" rel="noreferrer">https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf</a></p>
  
  <p>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. </p>
  
  <p>where is the misstake?
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function foo() {
   $("#respond").append("|");
  }
  
  const throttle = (func, limit) =&gt; {
    let inThrottle
    return function() {
      const args = arguments
      const context = this
      if (!inThrottle) {
        func.apply(context, args)
        inThrottle = true
        setTimeout(() =&gt; inThrottle = false, limit)
      }
    }
  }
  
  var onClick = function() {
      throttle(foo(), 50000);
  };
  
  $('#button').click(onClick);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="button" id="button" value="Click Me" /&gt;
  &lt;div id="respond"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>