同步投票按钮与后端投票function

我有一个投票按钮，可以在我的视图中立即更改颜色和计数。 通过按钮触发的后端function应在后端处理，以便用户无法识别它。 问题是如果我用jquery在视图中更改我的按钮的颜色，如果用户非常快地按下按钮，则与后端function不同步。 所以我想知道如何处理这个？ 如果我使用ajax响应，它需要很长时间..这不是一个良好的用户体验。 我希望你们明白我的意思？

id }}" class="vote {{ Auth::check() && Auth::user()->votedFor($article) ? 'active' : '' }}"> 
{{ $article->votes->count() }} 

我想用来改变按钮颜色的脚本，并在我的视图中计算

  $(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元素而不是元素，在这种情况下，您可以使用disabled属性而不是.is-sending类名。