Одна функция в очереди вызывается несколько раз, в то время как она должна вызываться один раз

Question

Недавно я разрабатывал пользовательский слайдер контента на основе jQuery, который, в отличие от большинства других слайдеров, не отображал бы пролетающие несколько изображений при переходе между двумя элементами, которые не соседствуют друг с другом.Он работал просто отлично, за исключением того, что нажатие на несколько селекторов, пока анимация еще не завершена, все испортило.Я решил реализовать механизм организации очередей, который задерживал бы запуск анимации до завершения другой анимации.Однако больше проблем ждало меня.По какой-то странной причине функция очереди вызывается пять раз вместо одного при снятии очереди.Вы можете увидеть это в действии здесь: http://jsfiddle.net/QLLKt/embedded/result/. Нажмите на любой селектор слайдов, когда анимация активна.Теперь вы должны увидеть, что время, в которое функция была поставлена ​​в очередь, отображается пять раз, хотя предполагается, что она должна отображаться только один раз.

Мой вопрос: почему он так себя ведет и есть ли лекарство от этого?

Answer 1

Оказывается, корень проблемы лежал в следующих строках кода:

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

Запрос к классу «селектор» возвращает шесть элементов. Поэтому он помещает одну функцию в очередь каждого элемента, что приводит к тому, что эта функция вызывается шесть раз.