并发AJAX回调:如何同步它们

Concurrent AJAX callbacks: how to synchronize them?

本文关键字：同步何同步 AJAX 回调并发更新时间：2023-09-26

我的应用程序通过AJAX/JSONP加载HTML和JavaScript，而不是以标准方式加载页面。它在Iframe中工作，因此，它是与父Frame保持通信的正确方式（Safari限制）。

我必须提出两个请求：为自定义页面加载JavaScript和HTML。为了确保一切正常，我可以首先加载JavaScript，然后加载HTML（在JavaScriptonload回调中）。但我希望这两个请求同时发送。

我准备了代码。当JavaScript和HTML都已加载时，脚本必须调用_finishLoad（）。函数_finishLoad（）是否可能不会在浏览器中执行？

 function Loader()
 {
       this.load = function()
       {
                    // ...some code here...
        var this_ = this;
        var jsLoaded = false;
        var htmlLoaded = false;
        $.ajax(
            url: newUrl,
            dataType: "jsonp",
            jsonpCallback:
                function()
                {
                    $.ajax(
                        url: someUrl,
                        dataType: "html",
                        success:
                            function( data )
                            {
                                $( '#' + contentElId ).html( data );
                                if( htmlLoaded )
                                {
                                    this_._finishLoading()
                                }
                                jsLoaded = true;
                            }
                    );
                }
        );
        $.ajax(
            {
                url: someUrl2,
                dataType: "html",
                success:
                    function( data )
                    {
                        $( '#' + contentElId ).html( data )
                        if( jsLoaded )
                        {
                            this_._finishLoading()
                        }
                        htmlLoaded = true;
                    }
            }
        );
    }

}

更新。

我需要加载JavaScript，HTML然后调用onload（）来初始化加载的JavaScript如果你知道更方便的方法，请单独加载，请告诉我。

考虑使用$.when（）函数

代码应该是这样的：

        var this_ = this;
        var jsLoaded = false;
        var htmlLoaded = false;
        var deferred = $.Deferred();
        $.ajax(
            url: newUrl,
            dataType: "jsonp",
            jsonpCallback:
                function()
                {
                    $.ajax(
                        url: someUrl,
                        dataType: "html"
                        success: function(){
                           deferred.resolve();
                        }
                    );
                }
        );
        var promise2 = $.ajax(
            {
                url: someUrl2,
                dataType: "html",
            }
        );
        $.when(deferred, promise2).done(function(a1, a2){
           $( '#' + contentElId ).html(a1);
           $( '#' + contentElId ).html(a2);
           this_._finishLoading()
        });