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

时间:2013-07-13 11:24:17

标签: javascript html ajax iframe jsonp

我的应用程序通过 AJAX / JSONP 加载 HTML JavaScript ,而不是通过标准方式加载页面。它适用于 Iframe ,因此,它是与父 Frame Safari 限制)保持通信的正确方法。

我必须提出2个请求:为自定义页面加载 JavaScript HTML 。为了确保一切正常,我可以先加载 JavaScript 然后 HTML (在 JavaScript onload回调中)。但我希望这两个请求能够同时发送。

我准备了代码。当 JavaScript HTML 加载时,脚本必须调用 _finishLoading()。是否有可能在浏览器中执行 _finishLoading()功能?

 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。 如果您知道更方便的方式,请单独加载它们,请告诉我

1 个答案:

答案 0 :(得分:1)

考虑使用$.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()
        });