检查所有Ajax请求何时完成-纯JavaScript [英] Check when all Ajax Requests are complete - Pure JavaScript

问题描述

我了解 jQuery的ajaxStop 方法.

$(document).ajaxStop(function() { //Do something });

如果jQuery不可用，是否可以使用纯JavaScript做到这一点?

Is there a way to do this with pure JavaScript if jQuery is not available?

如果可以的话，您能提供一个例子吗?

Could you provide an example if so?

欢呼

推荐答案

很好，我会咬的(尽管即使尝试也不是很懒惰)

Very well, I'll bite (though not even trying is quite lazy on your part):

从 jQuery文档:

每当Ajax请求完成时，jQuery就会检查是否还有其他未完成的Ajax请求.如果没有剩余的内容，jQuery将触发ajaxStop事件.此时，将执行已向.ajaxStop()方法注册的所有处理程序.

Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests. If none remain, jQuery triggers the ajaxStop event. Any and all handlers that have been registered with the .ajaxStop() method are executed at this time.

那么您需要什么?好:您将用于执行AJAX请求的中央API(各种模块).在此模块中，您必须跟踪待处理的请求，并在请求终止后将其删除.
如果队列(可以这么说)为空，那么您可以检查 ajaxStop 队列中是否有任何已注册的回调，然后调用这些回调.

So what will you need? Well: a central API (a module of sorts) that you'll use to perform AJAX requests. In this module, you'll have to keep track of pending requests, and remove them once the requests have terminated.
If the queue (so to speak) is empty, then you can check the ajaxStop queue for any registered callbacks, and invoke those.

基本设置(伪代码)如下所示:

A basic setup (pseudo-code) would look like this:

var myAjax = (function()
{//create closure scope to track ajax requests
    var activeRequests = [],
        stopQueue = [],
        ajaxModule = {},//the module itself
        createXhr = function(){};//function to create XHR requests
    ajaxModule.ajax = function(params, callback)
    {
        var xhr = createXhr(params),
            key = activeRequests.length;
        activeRequests.push(xhr);//add to active array
        xhr.onreadystatechange = function()
        {//assign internal handler
            if (this.readyState === 4 && this.status === 200)
            {
                //invoke passed callback only if request is done
                callback.call(this, []);//pass params as you please
                activeRequests.filter(function(e)
                {
                     return e !== this;
                }, this);//define this callback in closure, of course
                if (activeRequests.length === 0)
                {//no more active requests
                    stopQueue.map(function(callback)
                    {
                        callback();//invoke callbacks
                    });
                }
            }
        };
    };
    return ajaxModule;//expose module
}());

当然，您仍然必须实现管理stopQueue回调的功能，并且必须自己实现可靠的AJAX模块，但这是您可以使用的简单设置.

Of course, you'll still have to implement the functions that manage the stopQueue callbacks, and you'll have to implement a reliable AJAX module yourself, but this is the simple setup that you could use.

这篇关于检查所有Ajax请求何时完成-纯JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！