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

Question

背景:当用户单击按钮时，其类会在class1和class2之间切换，并且此数据是通过 AJAX 提交。为了确认此数据已保存，服务器使用 js 进行响应(更新按钮 HTML)。

问题:如果用户点击按钮的速度比服务器响应的速度快(即快速点击按钮)，则一旦服务器响应实际到达，按钮就会来回切换:

1. 用户点击按钮，通过js更改为class2(AJAX提交)
2. 用户点击按钮，通过js更改为class1(AJAX提交)
3. 服务器响应第一个 AJAX 请求，并将 html 刷新为 class2
4. 服务器响应第二个 AJAX 请求，并将 html 刷新为 class1

如果发出新的ajax请求，如何取消ajax请求？

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

Answer 1

已编辑

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

有关中止的更多信息 - How to cancel/abort jQuery AJAX request?

block 用户界面示例:

因此，为了阻止许多ajax调用，我们需要一些变量来保存当前的ajax状态，并在请求中将其设置为true(启用ajax)，当调用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'
        });
    }


});