jQuery: Delay execution of any function

If you ever wanted to use jQuery’s delay function to delay the execution of any other function than e.g. jQuery’s effect functions you probably tried something like this:

$(document).ready(function(){
  $("#myElement").delay(2000).trigger("click");
});

My intension was to trigger the “click” event on #myElement two seconds after the DOM was loaded. During testing however it turned out that the event was triggered right away without any delay.

Taking a closer look at the delay function showed me that only functions that are queued in jQuery’s default “fx” queue are delayed by a delay-call like the one above. 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(){ 
  $(this).trigger("click"); 
  $(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(){ 
  $(this).trigger("click"); 
}).dequeue("myQueue");