Question

我正在加载2个XML文档，它们都成功运行函数，尽管第2个XML文档的函数依赖于第1个文档的完成。

如果我有异步：true：

第一个XML

function XmlDataTypes() {

    var result = null;
    var scriptUrl = "http://domain.com/xml/test.XmlDataTypes?AccountId=" + AccountId;
    $.ajax(
    {
        url: scriptUrl,
        type: 'get',
        dataType: 'xml',
        async: true,
        success: function (data) {

        //create array to be used in second XML
       for (var i = 0; i < xmlRows.length; i++) {

                        var dataType = xmlRows[i];

                        var dataTypeId = nodeValue(dataType.getElementsByTagName("DataTypeId")[0]);
                        var dataTypeName = nodeValue(dataType.getElementsByTagName("DataTypeName")[0]);

                        dataTypeArray.push({ dataTypeId: dataTypeId, dataTypeName: dataTypeName, position: i, markerArray: [] });

                    }



        },
        error: function onXmlError() {
            alert("An Error has occurred.");
        }

    });

    return result;

}

第二个XML

function XmlAmenityData() {

    var result = null;
    var scriptUrl = "http://domain.com/xml/test.XmlAmenityData?AccountId=" + AccountId;
    $.ajax(
    {
        url: scriptUrl,
        type: 'get',
        dataType: 'xml',
        async: true,
        success: function (data) {

        //store this info in markerArray in dataTypeArray

        },
        error: function onXmlError() {
            alert("An Error has occurred.");
        }

    });

    return result;

}

XML数据可以按随机顺序加载，因此如果第一个文档没有完成，第二个文档的函数将会出错。

如果我设置：

async: false

它工作正常，但我收到警告：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

有没有办法解决这个问题而不使用：

async: false

Answer 1

由于第二个xml依赖于第一个，因此您可以在成功时定义回调。此外，由于ajax是异步的，因此必须在调用回调时分配结果。您可以定义函数的自变量（在本例中为数组）并将数据放在那里。

var result = [];
function XmlDataTypes(url, accountId, callback) {
    var scriptUrl = url + accountId;
    $.ajax({
        url: scriptUrl,
        type: 'get',
        dataType: 'xml',
        async: true,
        success: function (data) {
             // do something
             result.push(data);
             if(typeof callback == 'function') {
                 callback();
             }
        },
        error: function onXmlError() {
            alert("An Error has occurred.");
        }
    });
}

function doSomething() {
    // Do something to store this info in markerArray in dataTypeArray
    // XmlAmenityData is in results var.
}

你可以像这样使用它

var _callback = XmlDataTypes("http://domain.com/xml/test.XmlAmenityData?AccountId=", "1234", doSomething);
XmlDataTypes("http://domain.com/xml/test.XmlDataTypes?AccountId=", "1234", _callback);

编辑：根据给定方案更新了脚本。

Answer 2

您可以尝试将$ .ajax作为承诺返回：

function XmlDataTypes() {

// note domain.com was changes to example.com - this should be changed back

var scriptUrl = "http://example.com/xml/test.XmlDataTypes?AccountId=" + AccountId;
return $.ajax(
{
    url: scriptUrl,
    type: 'get',
    dataType: 'xml',
    async: true,
    success: function (data) {

    //create array to be used in second XML
   for (var i = 0; i < xmlRows.length; i++) {

                    var dataType = xmlRows[i];

                    var dataTypeId = nodeValue(dataType.getElementsByTagName("DataTypeId")[0]);
                    var dataTypeName = nodeValue(dataType.getElementsByTagName("DataTypeName")[0]);

                    dataTypeArray.push({ dataTypeId: dataTypeId, dataTypeName: dataTypeName, position: i, markerArray: [] });

                }
    },
    error: function onXmlError() {
        alert("An Error has occurred.");
    }

});    

}

然后按顺序调用它们：

XmlDataTypes.done(XmlAmenityData);

以下是一些文档： http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html

ajax按顺序加载2个XML文档而不使用async：false

2 个答案: