Question

I have this piece of code:

$(input).keyup(function() {

    var searchTerms = getSearch();
          doSearch(searchTerms); 

}); 

The function doSearch gives me a list of results (search results). I would like to mimic Google by ‘fading’ out the results on keyup then set a timer or event .delay and then do the function which is providing the results, so:

1. keyup –> fade out 50%
2. wait a period of time
3. do function doSearch(searchTerms);

I know how to do the events but I cant seem to put them all together.

Answer 1

jQuery happens to have two things to solve this.

.delay()

and

jQuery.queue()

If you want to delay e.g. the trigger function you either need to queue it in the fx-queue or in a separate queue. Here is how that works:

$("#myElement").delay(2000).queue(function(){ 
  var searchTerms = getSearch();
  doSearch(searchTerms); 
  $(this).dequeue(); 
});

If you don’t want to use the default fx-queue, this is how to queue the function in your own queue:

$("#myElement").delay(2000, "myQueue").queue("myQueue", function(){ 
  var searchTerms = getSearch();
  doSearch(searchTerms); 
}).dequeue("myQueue");