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类名。

带有后端投票功能的同步投票按钮

1 个答案: