выполнение 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 UI . В частности часть эффектов плагина. Я использую слайд-эффект на моем личном веб-сайте (нажмите на стрелки по бокам полей).

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

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

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 являются асинхронными, в качестве параметра in можно передать функцию обратного вызова, которая вызывается по окончании предыдущего вызова (то же самое для ошибок).

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

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

Привет