文章/答案/技术大牛

发布

社区首页 >问答首页 >关于"for“循环中的jquery$.ajax问题

问关于"for“循环中的jquery$.ajax问题
EN

Stack Overflow用户

提问于 2010-12-03 14:29:44

回答 2查看 1.6K关注 0票数 3

我使用$.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，因此结果是在contain <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>

这有什么问题吗？

但是当我在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

那么容器可能是正确的，因为

那么为什么会发生这种情况呢？我该如何解决这个问题？

谢谢您：)

xml

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2010-12-03 15:29:43

我相信有几件事正在发生。首先，$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评论的回应

使用"alert“可能会中断执行过程，并允许意外调用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中进行开发时，使用"alert“可能会令人沮丧，因为它会导致代码执行不可预测。因此，我不推荐在调试时使用"alert“。相反，使用console.log()更容易预测。console.log()可以在所有现代浏览器和IE 8+中工作。对于较旧的IE，您需要将文本输出到DOM中。

票数 4

Stack Overflow用户

发布于 2010-12-03 14:36:33

我认为这是由于AJAX请求的异步特性造成的。尝试将async属性设置为false。

备注

同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/4343048

复制

相似问题

问关于"for“循环中的jquery$.ajax问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于"for“循环中的jquery$.ajax问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问关于"for“循环中的jquery$.ajax问题
EN