Trung tâm cá nhân
sách gpt4 ai đã đi

Hủy yêu cầu AJAX nếu có yêu cầu AJAX mới được gửi

In lại 作者：行者123 更新时间：2023-11-28 12:20:44 35 4
mua khóa gpt4 Nike

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

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

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

1 Câu trả lời

已编辑

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


});

关于javascript - 如果提交了新的 AJAX 请求，则取消 AJAX 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39065028/

35 4 0
Bài viết được đề xuất: javascript - 带折叠 BootStrap 的菜单
Bài viết được đề xuất: ios - Swift:通过抛出转义闭包进行错误处理(令人困惑)
Bài viết được đề xuất: css - 如何设置CSS层次结构
Bài viết được đề xuất: javascript - 将 HTML 子元素移出父元素并删除父元素
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com