Question

我在点击按钮时同时执行ajax请求。

我有一个包含警报列表的表，每行都有它自己的按钮，一旦点击就会尝试清除数据库中的警报，然后将其从表中删除。

我可以一个接一个地点击这些按钮并触发ajax请求。

问题：

让我说我点击一个按钮，由于某种原因这需要时间，用户设法点击另一个按钮开始一个新的ajax。

如果当前作用域中的所有ajax请求都已完成，我想在我的ajax succes方法 ONLY 中执行脚本块。

代码：

$(".signAlarm")
    .on("click",
        function () {
            var _this = $(this).parents(".alarmRow");
            var alarm = {
                Id: $(_this).data("id")
            }
            $.automation.worker.postJson("/Alarm/SigAlarm",
            JSON.stringify({ alarm }),
            function (data) {
                if (!$.automation.worker.ajaxActive()) {
                    // execute this if all the sign alarm attempts are finished                               
                }
                $(_this).remove();
            });
        });

ajaxActive功能：

ajaxActive: function() {
    if ($.active) return true;

    return false;
}

在搜索答案时，我发现jquery.active我在上面的尝试中使用但是当我在成功方法中检查jquery.active时，它是＆＃34; 1＆＃34;即使只点击了一次按钮，也不会为0。

我还检查了this post，这让我想到了jquery.active以上，但是$ .ajaxStart和$ .ajaxStopp。

$ .ajaxStart和$ .ajaxStopp的问题，据我所知，它们是全球性的，我希望在签署这些警报时执行特定的代码，并且不希望在每个页面上发生这种情况。制作ajax。

我该如何管理？

Answer 1

经过大量的思考和在jquery中搜索某种函数的构建后，我决定自己尝试一下。

我想要的是什么：

制作几个ajax请求
跟踪我在特定范围内的请求数量（NOT GLOBAL）
在没有制作ajax时执行脚本。

代码：

全局数组：

 ajaxRequests: { value: [] }

在每个ajax请求之前：

$.automation.globals.ajaxRequests.value.push(1);

：

    clearAjax: function() {
        $.automation.globals.ajaxRequests.value.splice(-1, 1);
    }

总结一下：

       $(".signAlarm")
            .on("click",
                function () {
                    var _this = $(this).parents(".alarmRow");
                    var alarm = {
                        Id: $(_this).data("id")
                    }

                    $.automation.globals.ajaxRequests.value.push(1);

                    $.automation.worker.postJson("/Alarm/SigAlarm",
                    JSON.stringify({ alarm }),
                    function (data) {
                        $.automation.worker.clearAjax();
                        if ($.automation.globals.ajaxRequests.value.length === 0) {
                           // all ajax finished, execute code
                        }
                        $(_this).remove();
                    });
                });

Answer 2

您可以使用deferred objects。

$('.signAlarm').each(function() {
    var prom = $.Deferred().resolve();
    $(this).click(function() {
        var _this = $(this).parents(".alarmRow");
        var alarm = {
            Id: $(_this).data("id")
        };
        prom = prom.then(
            function () {
                return $.post({
                    'url': '/Alarm/SigAlarm',
                    'data': JSON.stringify(alarm),
                    'contentType': 'application/json' // assuming you want the server to think you're sending json
                });
            }
        ).done(function () {
            if (prom.state() === "resolved") {
                // all ajax finished, execute code
            }
            $(_this).remove();
        });
    });
});

我不确定$.automation的用途，但如果您需要，我会编辑我的答案。另外，请注意我如何使用.each()创建范围，以便单独处理具有类signAlarm的每个元素。如果您希望共享所有可点击元素的所有调用，则可以创建全局prom变量。

如何跟踪正在进行的ajax请求？

2 个答案: