I have a bit of code that adds to the jQuery prototype that uses timers. The code executes fine through queue() but one, or as i would assume, both timers do not clear. This is specially noticeable with the blink-function i have. The DOM element just keeps blinking.
I know the code as such works because before i implemented the queue() it stopped after 6 "blinks". The code is as follows:
(function($) {
$.fn.extend({
blink: function(times,delay,name) {
times = times || 1;
delay = delay || 1000;
name = name || "fx";
return this.queue(name, function() {
var self = this;
var counter = 0;
var timer = setInterval( function() {
if($(self).hasClass("hidden")) {
$(self).removeClass("hidden");
counter++;
} else {
$(self).addClass("hidden");
}
if(counter == times) {
clearInterval("timer");
$(self).dequeue();
}
}, delay);
});
},
pause: function(delay,name) {
delay = delay || 1000;
name = name || "fx";
return this.queue(name, function() {
var self = this;
var timer = setTimeout(function() {
clearTimeout("timer");
$(self).dequeue();
}, delay);
});
}
});
}(jQuery));
The functions are executed like below where $(this) is the object/element in question:
$(this).pause(1000).blink(6,175);
The problem as i mentioned is that the functions run in order just fine but the timers never seem to clear. Any ideas?
EDIT
Thought I'd add another question to the above. You see, i'm still a newbie and have read a lot about function returns but never really understood what was happening with the above return this.queue( ... )?
When i call the function with 'pause(1000)' what exactly is returned? Or is 'pause(1000)' replaced somehow with the returning object inside the chain? Thanks again!