jquery - Sync vote button with backend vote function

Question

I have a vote button which should change color and count immediately in my view. The backend function triggered through the button should process in the backend so the user does not recognize it. The problem is if I change the color of my button in my view with jquery this runs out of sync with the backend function if a user presses the button very fast. So I wanna know how to handle this? If I do it with the ajax response it takes to long.. and this is not a good user experience. I hope you guys understand what I mean?

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

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

The script I wanna use to change color of button and count in my view

      $(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') !!}";
            }
        },
    });
});

Did it like so but dont know if thats the way to go? Looks a little bit unprofessional but I have no idea how its normally done...

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

Answer 1

The solution here is disabling the button when the service is not completed yet. To do it, you just add class name .is-sending when user click the button, this is CSS:

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

Then in success you remove that class name. I highly recommend you should use the button element instead of a element, and in this case you can use disabled attribute instead of .is-sending class name.