Jquery、ajax() 和each()，如何等到所有信息真正加载？答案

【问题标题】：Jquery, ajax() and each(), how to wait untill all info is really loaded?Jquery、ajax() 和each()，如何等到所有信息真正加载？
【发布时间】：2011-02-28 08:41:32
【问题描述】：

我有一个函数使用 $.ajax() 从 XML 文件中获取值，当加载信息并触发成功事件时，我使用 $(xml).find('').each(function() {});填充一些变量...

function getData()
{
    $.ajax({
        type: 'GET',
        url : 'info.xml',
        dataType: 'xml',
        success: function(xml)
        {
            $(xml).find('DATAS').each(function()
            {
                date = new Date($(this).attr('DATE'));
                alert(date);
            })
                    //Here I have a bigger find/each that should take more time 
        },
            error: function()
            {
                    return false;
            }

    }); 
}

在这种情况下，当我从文档就绪函数触发该函数时，警报会显示正确的数据，但如果我从函数中删除警报并尝试这样做，日期将不会被定义：

$(document).ready(function()
{
if(getData() != false)
{
    alert(date);

    }
});

我猜在这种情况下数据还没有准备好？有没有办法控制整个 each() 遍历完成并准备就绪？

【问题讨论】：

标签： jquery xml ajax each

【解决方案1】：

.ajax() 发起一个异步请求，这意味着getData() 将立即返回。您必须在成功处理程序中对返回的数据执行各种操作，或者通过添加

将 .ajax 请求设置为同步

$.ajax({
   async: false   
});

【讨论】：

我强烈建议尽可能不要使用async: false，这会不必要地锁定用户的浏览器。
@Nick：100% 同意，但把这个放到答案中可能会让事情更容易理解。

【解决方案2】：

发生这种情况是因为 AJAX 是异步的，这意味着 $.ajax() 调用直到 if() 完成后才会完成……alert() 只是给它时间完成。您应该启动任何需要使用来自success 回调内部数据的操作，当它运行时数据可用。像这样的：

$(function() {
  getDataAndDoSomething();
  //other ready stuff...
});
function getDataAndDoSomething() {
  $.ajax({
    type: 'GET',
    url : 'info.xml',
    dataType: 'xml',
    success: function(xml) {
        $(xml).find('DATAS').each(function() {
            date = new Date($(this).attr('DATE'));
            alert(date);
        })
        //Do the other stuff depending on the date data
    }
  }); 
}

【讨论】：

要去看看这个，关于 ajax: async 我过去已经尝试过，它真的可以冻结浏览器。