Question

后台：当用户点击button时，其课程在class1和class2之间切换，此数据通过AJAX提交。要确认此数据已保存，服务器将使用js（更新按钮HTML）进行响应。

问题：如果用户点击按钮的速度快于服务器可以响应的速度（即快速按下按钮），则一旦服务器响应实际到达，该按钮将来回切换：

用户点击按钮，通过js（AJAX提交）

class2

用户点击按钮，通过js（AJAX提交）

class1

服务器响应第一个AJAX请求，并将html刷新为class2
服务器响应第二个AJAX请求，并将html刷新为class1

如果新的请求被取消，ajax请求怎么能被取消？

$('.button').click(function() {
    $('this').toggleClass('class1 class2')
    // submit ajax request
    $.ajax({
        url: '/update_link'
    })
});

Answer 1

EDITED

Ajax调用可以通过ajax请求对象上使用的 abort 方法中止，但即使使用此方法也不能100％确定服务器端没有处理我们的请求。所以我的主张是阻止用户界面，而不是中止ajax调用。

有关中止 - How to cancel/abort jQuery AJAX request?

的更多信息

示例BLOCK UI：

因此要阻止许多ajax调用，我们需要一些变量来保存当前的ajax状态，并在begging（ajax enabled）中将其设置为true，当调用ajax时将其设置为false，当ajax在响应中返回时将其设置为true 。最重要的是在用户点击时检查此变量，如果变量为false，则不能调用其他任何ajax并停止执行。

var canSendAjax=true;//our state variable

$('.button').click(function() {

    if (!canSendAjax)
    return; //ajax is sending block execution

    $('this').toggleClass('class1 class2')
    // submit ajax request

    //here ajax starts so set state to false
    canSendAjax=false;

    //extended to solution loading info
    //save button current text label in variable
    var label=$(this).text();
    //set loading on button for ui friendly
    $(this).text("Loading...");

    $.ajax({
        url: '/update_link'
    }).done(function() {

       //here after ajax
       canSendAjax=true; //we enable button click again
       $(this).text(label);//set previous button label

    });

});

使用ABORT的例子：

var ajax=null; //our ajax call instance

$('.button').click(function() {


    if (ajax!=null){

        ajax.abort();

        ajax=ajax=$.ajax({
          url: '/update_link'
        });
    }


});

Answer 2

为什么不在请求完成后立即禁用按钮并切换课程？

$('.button').click(function() {
    $this = $(this);
    $this.prop('disabled', true);
    // submit ajax request
    $.ajax({
        url: '/update_link',
        success: function() {
            $.toggleClass('class1 class2');
            $this.prop('disabled', false);
        }
    })
});

（如果禁用输入，则单击事件触发无效）

如果提交了新的请求，请取消AJAX请求

2 个答案: