防止 jQuery 中的多个 AJAX 调用答案

【问题标题】：prevent multiple AJAX-Calls in jQuery防止 jQuery 中的多个 AJAX 调用
【发布时间】：2015-06-08 19:54:09
【问题描述】：

我试图用 PHP、jQuery 和 AJAX 完成一个“真正的”MVC。

我有一个前端（Web-GUI、jQuery）触发 AJAX 调用到后端（PHP 和 MySQL）并根据这些 AJAX 调用的结果重新（呈现）前端。

例如：

用户名列表（来自 Active Directory）显示在前端，如果您单击其中一个，则会触发 AJAX 调用，从而在后端进行数据库操作。

当 AJAX 调用完成后，页面会根据模型新“状态”的后端数据库操作结果重新呈现。

一切正常，除了当一个 Web-GUI 用户连续快速点击该用户名列表中的许多用户时，Web-GUI 要么冻结，要么我得到布局错误，如混乱的 HTML-tables。 ..

我想要的是防止用户点击这些用户连续快速或以某种方式被我的应用程序捕获。

我在网上搜索了几天并尝试通过将下一个调用放入上一个调用的成功函数来嵌套 AJAX 调用。

$.ajax({

    cache: false,
    type: "POST",
    url: '/index.php/ssadmin/delUser',
    data: {userName: userName, repoName: repoName, locationName: locationName}

}).success(function () {

    // DO STUFF ...

    $.ajax({

        type: "POST",
        url:  '/index.php/ssadmin/changePermissions',
        data: { userName: userName, permissions: "r", repoName: repoName, locationName: locationName }

    }).success(function( returnData ) {

        // DO STUFF ...

    }).fail(function () {

        console.log("AJAX FAILED");

    });

}).fail(function () {

    console.log("AJAX FAILED");

});

我也尝试过网络工作者。无济于事。

function userInfo(ouName, userName, repoName, locationName, locationType) {

    var workerUserInfoOU = $.work({file: '/js/workerUserInfoOU.js', args: { ouName: ouName }});
    var workerUserInfoRepo = $.work({file: '/js/workerUserInfoRepo.js', args: { userName: userName, repoName: repoName, locationName: locationName     }});

    $.when(workerUserInfoOU, workerUserInfoRepo).done(function(userInfoOU, userInfoRepo){

        //DO STUFF

    });

}//end userInfo

如果有人能指出我正确的方向，我将不胜感激。

最好的问候尼禄

【问题讨论】：

使用 jQuery 延迟对象

标签： jquery ajax

【解决方案1】：

方法一，使用阻塞请求：

$.ajax({ async: false, type: 'POST', ... })

方法2，用变量表示最后一次请求是否完成。

方法3，禁用用户刚刚点击的按钮，并在ajax请求完成时启用。

【讨论】：