xml - 关于 "for"循环中jquery$.ajax的问题

Question

我使用 $.ajax 在“for”循环中读取 xml 信息

这是我的 xml 文件:

<application>
    <app id="id-1">
  <html_code>
          <div id="id-1" class="portlet">
               <div class="portlet-header"Links</div>
               <div class="portlet-content">id-1</div>
          </div>
  </html_code>
   </app>
    <app id="id-2">
           <html_code>
                <div id="id-2" class="portlet">
                     <div class="portlet-header"Links</div>
                     <div class="portlet-content">id-2</div>
                </div>
           </html_code>
   </app>
<application>

然后我使用 $.ajax 获取标签中的内容，并在此页面中添加一个包含这是js代码:

$.ajax({
   ……
  success:function(){
       for (var i = 0; i < $children.length; i++) {                        
        var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 
        $.ajax({
              type: "get",
              url: "Database/App_all.xml",
              dataType: "html",
              success: function (xml) {
                        var $temp_code = $(xml).find("app[id='" + $temp_id + "']").find("html_code").html();
                        $($temp_code).appendTo($("#contain")).hide().show('slow');
                         },
                          error: function () { }
                    });
             }    
  }
});

假设$children.length只有2，那么结果就是包含<div id="contain">应该有 <div class="portlet-content">id-2</div>和 <div class="portlet-content">id-1</div>

但结果是 <div id="contain">只有一种，是<div class="portlet-content">id-2</div>

这是怎么回事？

但是当我写 alert("");在 for (var i = 0; i < $layout_left_children.length; i++) { 之间和 var $temp_id = $layout_left_children.eq(i).attr("id");喜欢

  for (var i = 0; i < $children.length; i++) {
            alert($children.eq(i).attr("id"));        //could alert correct "id",first "id-1", then "id-2"                      
            var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 

那么包含可能是对的

那么为什么会这样呢？我该如何解决这个问题？

谢谢你:)

Answer 1

我相信有几件事情正在发生。首先，$temp_id 变量被提升到函数的顶部，所以它相当于这样做:

$.ajax({
   ……
  success:function(){
       var $temp_id;
       for (var i = 0; i < $children.length; i++) {                        
          $temp_id = $children.eq(i).attr("id");

其次，即使 $temp_id 在第一个循环中等于“id-1”，它在你的第二个循环中被更改为“id-2”，所以当你的成功回调第一次被调用时，它已经被更改为“id-2”。

这应该可以解决您的问题:

2010-12-03 更新:修复了一个错误

$.ajax({
   ……
    success:function(){
         for (var i = 0; i < $children.length; i++) {                        
            var $temp_id = $children.eq(i).attr("id");  //"$children" have defined in above 

            $.ajax({
                type: "get",
                url: "Database/App_all.xml",
                dataType: "html",
                success: function($tid) {
                    return function (xml) {
                        var $temp_code = $(xml).find("app[id='" + $tid + "']").find("html_code").html();
                        $($temp_code).appendTo($("#contain")).hide().show('slow');
                    }
                }($temp_id),
                error: function () { }
            });

        }    
    }
});

我正在做的是将 $temp_id 传递给返回另一个函数的函数，该函数将在成功回调中调用。现在可以安全地在成功回调中使用 $tid，因为当 $temp_id 在第二个循环中更改时它不会受到影响。

更新:对下面 hh54188 评论的回应

使用“警报”可以中断执行过程并允许意外调用 ajax 回调。在 IE 和 Firefox 中就是这种情况。另一方面，Chrome 并不像这样。要对此进行测试，您可以运行此代码:

for (var i = 0; i < 2; i++) {

    //if (i == 1) alert('stopping execution');

    console.log('loop: ' + i);
    $.ajax({
        url: "Database/App_all.xml",
        dataType: "html",
        success: function () {
            console.log('callback');
        }
    });
}

你会看到控制台的输出是:
循环:0
循环:1
回调
回调

现在取消注释带有警报的行。在 Firefox 和 IE 中，您会看到控制台中的输出现在是:
循环:0
回调
循环:1
回调

第一个回调在显示警告框时被调用。警报从根本上改变了代码的行为。在使用 JavaScript 进行开发时，使用“警报”可能会令人沮丧，因为它会导致代码执行不可预测。因此，我不建议在调试时使用“警报”。相反，使用 console.log() 更容易预测。 console.log() 适用于所有现代浏览器和 IE 8+。对于较旧的 IE，您需要将文本输出到 DOM。