Кнопка синхронизации голосования с функцией внутреннего голосования

Question

У меня есть кнопка голосования, которая должна изменить цвет и сразу посчитать на мой взгляд.Бэкэнд-функция, запускаемая через кнопку, должна обрабатываться в бэкэнде, чтобы пользователь ее не распознал.Проблема в том, что если я изменю цвет моей кнопки в моем представлении с помощью jquery, это не будет синхронизировано с функцией бэкэнда, если пользователь нажимает кнопку очень быстро.Итак, я хочу знать, как справиться с этим?Если я делаю это с ответом Ajax, это занимает много времени ... и это не очень хороший пользовательский опыт.Надеюсь, вы, ребята, понимаете, о чем я?

<a data-id="{{ $article->id }}" class="vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'active' : '' }}"></a>

 <div class="points">{{ $article->votes->count() }}</div>

Сценарий, который я хочу использовать, чтобы изменить цвет кнопки и посчитать на мой взгляд

      $(document).on('click', '.vote', function() {
    var $counter = $(this).parent().find('.points');
    $(this).toggleClass('active');
    if($(this).hasClass('active')) {
      $counter.html(parseInt($counter.text(), 10) + 1);
    } else {
      $counter.html(parseInt($counter.text(), 10) - 1);
    }
    var $button = $(this);
    $button.addClass('vote-live');
    var id = $button.data('id');
    var token = $('meta[name="csrf-token"]').attr('content');
    $.ajax({

        type: 'POST',
        url: "{!! URL::to('article/vote/') !!}/" + id,
        dataType: 'JSON',
        data: {
            "_method": 'POST',
            "_token": token,
            "id": id,
        },
        success: function(data) {
            $counter.html(data.count);
            $button.removeClass('vote-live');
            // var color = data.voted ? 'transparent transparent #a53031 transparent' : 'transparent transparent #a53031 transparent';
            // $button.css('border-color', color);
            console.log('success');
            console.log(data);
        },
        error: function(xhr) {
            $button.removeClass('vote-live');
            if (xhr.status == 401) {
                window.location.href = "{!! URL::to('login') !!}";
            } else if (xhr.status == 403) {
                window.location.href = "{!! URL::to('email/verify') !!}";
            }
        },
    });
});

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

    $(this).toggleClass('active');
      if($(this).hasClass('active')) {
        $counter.html(1);
      } else {
        $counter.html(0);
      }

Answer 1

Решением здесь является отключение кнопки, когда услуга еще не завершена.Чтобы сделать это, вы просто добавляете имя класса .is-sending, когда пользователь нажимает кнопку, это CSS:

.is-sending {
  pointer-events: none; // prevents the pointer event, so they cannot click
  cursor: default;
  opacity: 0.6; 
}

Затем в success вы удаляете это имя класса.Я настоятельно рекомендую вам использовать элемент button вместо элемента a, и в этом случае вы можете использовать атрибут disabled вместо .is-sending имени класса.