При нажатии на вкладку очень быстро выбираются две вкладки

Question

Когда я пытался быстро щелкнуть вкладки, в плагине Jquery SmartWizard.js было выбрано две вкладки, я попробовал этот способ, но, к счастью, никто не испытал это..., а также попытался .on /.off события не повезло.

$($this.steps).bind("click", function (e) {

    //e.stopImmediatePropagation();       
    $($this.steps).unbind("click");

    if ($this.steps.index(this) == $this.curStepIdx) {

        return false;
    }
    var nextStepIdx = $this.steps.index(this);
    var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
    if (isDone == 1) {
        _loadContent($this, nextStepIdx);
    }

    $($this.steps).bind("click");
    return false;
});

Answer 1

Привет, парень, спасибо за ваши усилия. Я решил проблему, заблокировав пользовательский интерфейс, используя плагин блокировки пользовательского интерфейса.

$($this.steps).on("click", function (e) {

    e.preventDefault();
    e.stopImmediatePropagation();
    if ($(this).attr('class') !== 'disabled' && $(this).attr('class') !== 'selected' && $(this).attr('class') !== 'error') {

        $('div.swMain').block({ message: "Processing..." });
    }

    try {

        if ($this.steps.index(this) == $this.curStepIdx) {

            $('div.swMain').unblock();
            return false;
        }

        var nextStepIdx = $this.steps.index(this);
        var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
        if (isDone == 1) {           
            e.preventDefault();
            _loadContent($this, nextStepIdx);

        }
    }
    catch (e) {

        $($this.steps).on("click");
        console.log("Fast click Error ===>   " + e);
    }


    if ($(this).attr('class') !== 'disabled' && $(this).attr('class') !== 'selected' && $(this).attr('class') !== 'error') {

        $('div.swMain').unblock();
    }

    return false;
});

Answer 2

Может быть, установить глобальную переменную и проверить, является ли глобальная переменная true? Вы можете установить небольшую задержку с помощью встроенной функции javascript delay() на очень небольшой промежуток времени после нажатия. Например,

go=true;
onclick:
    go=false;
    delay(100, some filler event);
    go=true;

РЕДАКТИРОВАТЬ: эта ссылка может помочь: http://ejohn.org/blog/how-javascript-timers-work/

РЕДАКТИРОВАТЬ: попробуйте это в JQuery:

$('id').click(function() {return false;});

Затем установите задержку и установите ее обратно.

РЕДАКТИРОВАТЬ: это, кажется, работает для меня. Обратите внимание, что если дважды щелкнуть ссылку с небольшой задержкой, она будет мигать только один раз. Если спамить кнопку примерно 10 раз очень быстро, она работает нормально. (С использованием последней версии Chrome)

РЕДАКТИРОВАТЬ: http://jsfiddle.net/ZDHZv/2/ отлично работает для меня. Если вы используете этот метод для вкладок, то невозможно получить двойной выбор. Реализуйте это с любым плагином, который вы используете $('.selected')

Answer 3

Вы можете попробовать что-то вроде этого:

var process = false;
$($this.steps).bind("click", function (e) {
    if (process) {
        return false;
    }
    process = true; 

    if ($this.steps.index(this) == $this.curStepIdx) {

        return false;
    }
    var nextStepIdx = $this.steps.index(this);
    var isDone = $this.steps.eq(nextStepIdx).attr("isDone") - 0;
    if (isDone == 1) {
        _loadContent($this, nextStepIdx);
    }
    process = false;
    return false;
});

Answer 4

Я обычно делаю что-то вроде этого:

var selection;
$('a').click(function () {
    if (selection !== undefined) {
        selection.removeClass('selected');
    }
    selection = $(this);
    selection.addClass('selected');
});

http://jsfiddle.net/ZDHZv/7/

Но мне пришло в голову, что вы также можете сделать это, предполагая, что все вкладки были братьями и сестрами, и ничего больше не было:

$('a').click(function () {
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
});

http://jsfiddle.net/ZDHZv/9/

Answer 5

После того, как я перечитал ваши 400+ строк исходного кода, я думаю, что знаю, в чем проблема.

Он находится в функции _loadContent. Загрузка контента происходит асинхронно из-за ajax, и вы устанавливаете выбранное после загрузки ajax.

Таким образом, следующая вкладка может быть выбрана, когда загружается предыдущая вкладка, хотя ее щелчок завершен.

Я получил два ответа для вас.

1. Сделать ajax синхронизированным.

   var ajax_args = {
       ...
       async : false,
       ...
   

   Это может обещать порядок выбора и все. Но, как вы знаете, это заставит пользователя ждать окончания загрузки контента.

2. Установить выбранный сразу, и установить стиль ошибки после. Как

   ...
   var stepNum = stepIdx + 1;
   _showStep($this, stepIdx);// add this to set selected immediately.
   if (ajaxurl && ajaxurl.length > 0) {
       if ($this.options.contentCache && hasContent) {
           return; // remove this and other _showStep calls.
       } else {
           var ajax_args = {
               ...
               error : function() {
                   $this.loader.hide();
                   $this.showError(stepIdx);// show error.
               },
               ...
   

   Порядок выбранного будет в порядке. Но ajax-загрузка и стиль ошибок станут асинхронными.

Это твой звонок.