Monday, April 12, 2010

jQuery Queue Re-Visited: Why doesn't clearQueue Work?

I have been playing with the jQuery queue functionality.

Primarily I have been using it to create pauses and delays for non-animation functions, which traditionally won't respect the .delay() function in jQuery 1.4.

I created a simple plugin that generates tooltips and want it to delay 1.5 seconds before displaying the tooltip. There are many items that can trigger these tooltips, so I tried something like this inside of the plugin:

$(this).clearQueue.delay(1500).queue(function() {
 // here is the hovered over element
 // $(this). 
 $.get("/tooltip/data", {}, function(data) {
  $(data).appendTo("body").fadeIn('slow');
 });
});

This wasn't working however and I was seeing dozens of $.get requests being executed to my intense frustration.

Finally I figured out the problem. The queue is not universal, it's only applied to the selector. Therefore, if I want to make essentially a universal queue I need to a apply it to an element that only exists once on the page.

I changed my function.

 el = $(this);
 $("body").clearQueue().delay(1500).queue(function() {
  // here's the hovered over element 
  // el.
  $.get("/tooltip/data", {}, function(data) {
   $(data).appendTo("body").fadeIn('slow');
  });
 });

Hurray No more overlapping get requests and ugly tooltip flicker nonsense!

Jamund

No comments:

Post a Comment