title: Debounce actions from multiple events
body: <p>How do I debounce an action that can be kicked off from multiple events? Here's an example just to demonstrate the behavior: <a href="http://jsfiddle.net/eXart/2/" rel="noreferrer">http://jsfiddle.net/eXart/2/</a></p>
  
  <pre><code>&lt;input type="text" id="t"&gt;
  
  &lt;div id="x"&gt;&lt;/div&gt;
  
  &lt;script&gt;
  function debounce(fn, delay) {
      var timer = null;
      return function () {
          var context = this, args = arguments;
          clearTimeout(timer);
          timer = setTimeout(function () {
              fn.apply(context, args);
          }, delay);
      };
  }
  
  function doStuff(){
      document.getElementById("x").innerHTML +="&lt;br&gt;stuff";
  }
  
      var t = document.getElementById("t");
      t.onchange = debounce(function(){ doStuff() }, 500);
      t.onblur = debounce(function(){ doStuff() }, 500);
  &lt;/script&gt;
  </code></pre>
  
  <p>If you enter some text in the textbox and click out of it, you see "stuff" appears twice instead of once because each event is getting it's own debounce instance. How do you share debounce instances across events?</p>