Question

我对javascript / jquery比较新。

我正在尝试运行一个嵌套的for循环，它会动态创建HTML内容然后将其附加到我的正文中的表中。第一个'for'循环从Parse中提取数据，并创建一个html表行脚本，然后我将其附加到html正文中的表中。嵌套的'for'循环应该为第一个循环中的每个项运行，并在下面创建一个表行元素。

但是，出于某种原因（我在调试时看到了这一点），第一个for循环在触发嵌套循环之前完成。是否有任何明显的原因或语法导致这种情况？

提前致谢！

$(document).ready(function(){
        var currentUser = Parse.User.current();
        var htmlContent = "";
        if (currentUser) {
            console.log(currentUser.get("full_name"));
            $("#user").html(currentUser.get("full_name"));

            var QrUrl = Parse.Object.extend("qr_url");
            var qr_query = new Parse.Query(QrUrl);
            qr_query.equalTo("createdBy", currentUser);
            qr_query.include("createdBy");
            qr_query.ascending("createdAt")

            qr_query.find({
                success: function(qrid_results) {
                    for (var i = 0; i < qrid_results.length; i++) { 
                        var qridentry = qrid_results[i];
                        htmlContent="<tr><td>"+qridentry.get("title")+"</td><td>"+"Created"+"</td><td>"+qridentry.createdAt+"</td><td>"+qridentry.get("createdBy").get("full_name")+"</td></tr>";
                        $('#trackingtable').append(htmlContent);

                        var QrLogger = Parse.Object.extend("qr_logger");
                        var qrlog_query = new Parse.Query(QrLogger);
                        qrlog_query.equalTo("qrid", qridentry);
                        qrlog_query.include("createdBy");
                        qrlog_query.include("qrid");

                        qrlog_query.find({
                            success: function(qrlog_results) {
                                for (var j = 0; j < qrlog_results.length; j++) { 
                                    var qrlogentry = qrlog_results[j];
                                    try{
                                        var user_id = obj.get("createdBy").get("full_name");
                                        console.log(user_id);
                                    }
                                    catch(err){
                                        user_id="Unknown Scanner";
                                    }
                                    var dated = qrlogentry.updatedAt;
                                    htmlContent="<tr><td>"+qrlogentry.get("qrid").get("title")+"</td><td>"+"Scanned"+"</td><td>"+dated+"</td><td>"+user_id+"</td></tr>";
                                    $('#trackingtable').append(htmlContent);    
                                }
                            }
                        });
                        //$('#trackingtable').dataTable({   });
                    }
                }
            });
        }
    });

Answer 1

这是一种让Promise工作的方法，使它们按照find同步时的顺序运行：

qr_query.find().then(function(qrid_results) {
  var promise = Parse.Promise.as();
  for (var i = 0; i < qrid_results.length; i++) { 
    promise = promise.then(function() {
      // Build qrlog_query...
      return qrlog_query.find();
    }).then(function(qrlog_results) {
      for (var j = 0; j < qrlog_results.length; j++) {
        // Do whatever synchronous work you want...
      }
    });
  }
  return promise;
});

```

有关详细信息，请参阅Google [javascript promises]。

Answer 2

您对第二个for循环周围的find方法的调用实际上是推迟执行，直到第二个查找完成为止。如果你希望内部for循环与第一个for循环同步执行，你需要构造你的代码，以便1.每个延迟执行被链接到你想要的顺序开始。 2.将所有HTML编辑移动到一个单独的函数中，该函数仅在所有qrlog查询成功执行后执行，将中间结果存储在某处，直到您准备好呈现HTML为止。

嵌套'for'循环直到第一个'for'循环后才触发

2 个答案: