title: Javascript - JQuery on() clearTimeout scope issue
body: <p>I've searched and searched and I'm coming up empty on this one guys. Help! I'm watching an input field (#filter_query) for keyup events using JQuery on(). When the user punches in some text into this input field the on() triggers a setTimeout() which then in turns triggers a search function for the site. I'm trying to avoid the search from being fired if the user continues to type into the input field thus the clearTimeout(). For some reason the timeout ID isn't being preserved for clearTimeout and a new ID is being generated each time. </p>
  
  <p>Here's my code:</p>
  
  <pre><code>$(document).on('keyup', '#filter_query', function (event) {
      var iTimeoutID,
          iTypingDelay = 800,
          sFilterVal = $.trim($('#filter_query').val()),
          sFilterCat = $('#filter_catagory').val(),
          sFilterCol = $('#filter_col').val();
  
      clearTimeout(iTimeoutID);
  
      if (sFilterVal !== "") {
          iTimeoutID = setTimeout(
                      function () {
                          searchFunction();
                      },
                      iTypingDelay
                      );
      }
  });
  </code></pre>
  
  <p>With the above code my search function is being fired off several times regardless of the clearTimeout(). Thank you!</p>