title: How to properly debounce ajax requests
body: <p>I have a checkbox than can toggle certain behaviour, however if someone makes a 100 consecutive clicks I don't want to send 100 requests to my server side.</p>
  
  <p>This is what I got in place so far (found this code snippet):</p>
  
  <pre><code>deBouncer = function($,cf,of, interval){
      var debounce = function (func, threshold, execAsap) {
          var timeout;
          return function debounced () {
            var obj = this, args = arguments;
            function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
            }
            if (timeout)
              clearTimeout(timeout);  
            else if (execAsap)
              func.apply(obj, args);
            timeout = setTimeout(delayed, threshold || interval);
          }
      }
      jQuery.fn[cf] = function(fn){  return fn ? this.bind(of, debounce(fn)) : this.trigger(cf); };
    };
  </code></pre>
  
  <p>In my document ready function :</p>
  
  <pre><code>deBouncer(jQuery,'smartoggle', 'click', 1500);
  </code></pre>
  
  <p>Then the event itself :</p>
  
  <pre><code>$(window).smartoggle(function(e){
    MyToggleFunction();
  });
  </code></pre>
  
  <p>This works as I've put 1500 ms to be the debouncing period, so if you click n times withing 1500 ms it will send only the latest state to the server.</p>
  
  <p>There is however side effect of using this, now my click event for other stuff is messed up. Am I doing something wrong here? Is there a better way to debounce?</p>