Question

Recently I was developing a custom jQuery-based content slider, which unlike most other sliders wouldn’t display multiple pictures flying by while transitioning between two items that are not adjacent to each other. It worked just fine, except that clicking on multiple selectors while the animation isn’t yet completed screws everything up. I decided to implement a queueing mechanism that would delay the animations start until the other animation has finished. However, more problems awaited me. For some odd reason the queued function is called five times instead of one upon the dequeueuing. You can see this in action here : http://jsfiddle.net/QLLKt/embedded/result/. Click on any slide selector while animation is active. You should now see that the time on which the function was queued is being displayed five times even though it is supposed to be displayed only once.

My question is: why it behaves like this and is there any cure for it?

Answer 1

Turns out that the root of the problem was lying in these lines of code:

 $('.selector').queue('queue', function () {
                    var d = new Date();
                    $('#result').append("<br/>" + "Queued at "+ d.getTime());

The query on “selector” class returns six elements. Therefore it puts a single function on the queue of eache elements, which leads to the function being called six times.