带有后端投票功能的同步投票按钮 [英] Sync vote button with backend vote function

问题描述

我有一个投票按钮，该按钮应更改颜色并在我看来立即计数.通过按钮触发的后端功能应在后端处理，以便用户无法识别它.问题是如果我使用jquery更改了视图中按钮的颜色，如果用户非常快速地按下按钮，则会与后端功能不同步.所以我想知道如何处理?如果我使用ajax响应来完成此操作，则将花费很长时间.这不是一个好的用户体验.我希望你们能理解我的意思吗?

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);
      }

推荐答案

此处的解决方案是在服务尚未完成时禁用按钮.为此，您只需在用户单击按钮时添加类名称.is-sending，这就是CSS:

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; 
}

然后在success中删除该类名称. 我强烈建议您使用button元素而不是a元素，在这种情况下，您可以使用disabled属性而不是.is-sending类名.

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.

这篇关于带有后端投票功能的同步投票按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！