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

Question

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

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

我可以依次单击这些按钮并触发 ajax 请求。

问题:

假设我单击了一个按钮，由于某种原因，这需要时间，并且用户设法单击另一个按钮来启动新的 ajax。

如果当前范围内的所有 ajax 请求都已完成，我想在我的 ajax succes 方法中仅执行脚本 block 。

代码:

$(".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();
            });
        });

ajax事件函数:

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

    return false;
}

在寻找答案时我发现jquery.active我在上面的尝试中使用了它，但是当我在成功方法中检查 jquery.active 时，它​​是“1”而不是 0，即使只单击了一个按钮。

我还检查了this post这让我想到了上面的 jquery.active，还有 $.ajaxStart 和 $.ajaxStopp。

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

我该如何管理这个问题？

Answer 1

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

我想要什么:

1. 发出多个 Ajax 请求
2. 跟踪我在特定范围(非全局)内收到的请求量
3. 在没有创建ajax时执行脚本。

代码:

全局数组:

 ajaxRequests: { value: [] }

在每个ajax请求之前:

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

每次ajax请求之后:

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