выполнение jQuery onClick

Question

У меня есть этот фрагмент JavaScript, написанный с помощью jQuery 1.2.5.Он содержится внутри основной функции() плагина, который я написал.Плагин представляет собой горизонтальный скроллер галереи, очень похожий на jCarousel.Он выполняет множество автоматических расчетов ширины и определяет, сколько прокручивать, исходя из этого и размера изображений, и именно это и происходят все вычисления.

У меня вопрос: как мне предотвратить срабатывание до завершения предыдущего выполнения?Например, если я немного щелкну счастливым и просто лихорадочно нажму на .digi_next.Когда это происходит, в пользовательском интерфейсе дела идут не так хорошо, и я бы хотел это исправить :) Я подумал, что ответ может заключаться в queue, но все мои попытки его использования не дали ничего путного.

    var self = this;
    $(".digi_next", this.container).click(function(){

        var curLeft = $(".digi_container", self.container).css("left").split("px")[0];
        var newLeft = (curLeft*1) - (self.containerPad + self.containerWidth) * self.show_photos;

        if (newLeft < ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1) {
            newLeft = ((self.digi_gal_width - (self.containerPad + self.containerWidth) * self.show_photos)) * -1;
        }

        $(".digi_container", self.container).animate({
            left: newLeft + "px"
        }, self.rotateSpeed);
    });

Answer 1

Просто используйте глобальный флаг занятости.Когда вы вводите обработчик кликов, проверьте его и продолжайте, только если он ложный.Сразу установите для него значение true, а затем снова установите его в значение false, когда анимация закончится.JavaScript является однопоточным, поэтому не стоит беспокоиться о состоянии гонки.

var busy = false;
$("...").onclick(function() {
    if (busy) return false;
    busy = true;
    $("...").animate(..., ..., ..., function() {
        busy= false;
    });
    return false;
});

Answer 2

Взгляни на jQuery пользовательский интерфейс.Конкретно часть эффектов вилки.Я использую слайд-эффект на мой личный сайт (нажимайте на стрелки по бокам ящиков).

Я запрещаю пользователям запускать эффект более одного раза (до того, как эффект закончится) с помощью один обработчик события и функция обратного вызова.

Вот исходный код

Answer 3

В качестве альтернативы упомянутому глобальному флагу вы можете присвоить значение элементу DOM, таким образом позволяя нескольким элементам на странице иметь одинаковое поведение:

$("...").onclick(function(el) {
    var self = el;
    if (self.busy) return false;
    self.busy = true;
    $("...").animate(..., ..., ..., function() {
        self.busy= false;
    });
    return false;
});

Answer 4

Поскольку вызовы функций JavaScript являются асинхронными, вы можете передать в качестве параметра функцию обратного вызова, которая вызывается после завершения предыдущего вызова (то же самое для ошибок).

Вы можете передать функцию, которую вы написали в этом посте, в качестве обратного вызова для функции, которая запускалась ранее.

Надеюсь это поможет.

С уважением