异步添加元素

Question

我正在尝试根据查询结果创建元素并将它们放入相应的p 容器中。问题是所有元素最终都在最后一个容器中，而不是它们应该放在的位置。

app.Controller.prototype.doReadOnlyDefault = function() {
  var def = $.Deferred();
  app.db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM table", [], function(tx, res) {
      var len = res.rows.length;
      var div = document.createElement("div");
      if (len !== 0) {
        var li = document.createElement("li");
        var lbl = document.createElement("label");
        lbl.textContent = res.rows.item(0).label;
        lbl.id = 'lbl' + res.rows.item(0).id;
        for (var i = 0; i < len; i++) {
          var item = res.rows.item(i);
          var pLu = document.createElement("ul");
          var txt = document.createElement("p");
          //yrdy
          app.checkinController.doDependent(id).done(function(val) {
            if (val) {
              pLu.className = "moc-checkin-field-group moc-checkin-name-group moc-checkin-field-readonly";
              pLu.appendChild(val);
            }
          });
          txt.appendChild(pLu);
          lbl.appendChild(txt);
        }
        li.appendChild(lbl);
        div.appendChild(li);
        def.resolve(div);
      } else {
        def.resolve(false);
      }
    });
  }, function(error) {
    console.log("'doDefault ERROR: '" + error.message);
  }, function() {
    //console.log("'doDefault OK: '");
  });
  return def.promise();
}

Answer 1

您正在被范围界定所困扰。您在 done 闭包中访问 pLu，但该变量对外部函数来说是词法，而不是闭包。因此所有的闭包都在看同一个pLu！如果您将代码中的 var 语句更改为 let 语句，事情应该会解决。