的Javascript回調兩個單獨的功能，並在同一個地方輸出

Question

我有以下代碼：

displayOrders: function(){ 
    function getRetailerName(retailerID, callback){ 
     var retailerName; 
     db.transaction(function(qry){ 
      qry.executeSql("SELECT retailerName FROM retailers WHERE token = '"+retailerID+"' ", [], function(tx, results1){ 
       var len1 = results1.rows.length; 
       var retailerName; 
       for (var i1=0; i1<len1; i1++){ 
        retailerName = results1.rows.item(i1).retailerName; 
        callback(retailerName); 
       } 
      }); 
     }); 
    } 
    db.transaction(function(qry){ 
     qry.executeSql("SELECT * FROM orders", [], function(tx, results){ 
      //query was a success 
      var len = results.rows.length; 
      for (var i=0; i<len; i++){ 
       var orderTime = results.rows.item(i).orderTime; 

       var retailerName; 
       getRetailerName(results.rows.item(i).retailerID,function(name) { //this uses a callback function... need to because request to DB is a 
        retailerName = name ; 
        $('#orderHistoryCollapsible').append('<div data-role="collapsible" data-collapsed="false"><h3>'+retailerName+' - '+orderTime+'</h3><p>Im the collapsible set content for section 1.</p></div>'); 
        $(".orderHistoryCollapsible").collapsibleset(); 
        $(".orderHistoryCollapsible").collapsibleset('refresh');    
       }); 
      } 
     }); 

    });  

所以基本上代碼運行兩個單獨的數據庫查詢和檢索數據被放入一個列表視圖。所述getRetailerName函數提供其在下面的查詢，這增加了這兩組數據的「orderHistoryCollapsible」 DIV使用回調。

我的問題是，還意味着要插入到DOM中orderTime值返回在每次循環的最後一個值。它幾乎就像兩個查詢需要作爲回調提供？但後來我不知道我將如何將數據追加到正確的地方..

任何幫助，將不勝感激

Answer 1

var orderTime在你的代碼中可能會產生誤導，因爲在javascript中局部變量的作用域不限於它們的封閉塊（比如在Java中），而是限制在它們的封閉函數中。更具體地，您的orderTime被初始化一次，則在每次循環迭代覆蓋（即，它是每次相同的變量）。

回調函數的引用變量（其被稱爲閉合，這意味着該變量將在那裏它被定義已經離開功能之後存在 - 因爲回調函數具有對它的引用）。通過調用回調函數時，循環完成其執行，所以orderTime具有其最後的值。

下面應該工作：

displayOrders: function(){ 
    function getRetailerName(retailerID, callback){ 
     var retailerName; 
     db.transaction(function(qry){ 
      qry.executeSql("SELECT retailerName FROM retailers WHERE token = '"+retailerID+"' ", [], function(tx, results1){ 
       var len1 = results1.rows.length; 
       var retailerName; 
       for (var i1=0; i1<len1; i1++){ 
        retailerName = results1.rows.item(i1).retailerName; 
        callback(retailerName); 
       } 
      }); 
     }); 
    } 

    function callbackFn(orderTime) { 
     return function(name) { 
       $('#orderHistoryCollapsible').append('<div data-role="collapsible" data-collapsed="false"><h3>'+name+' - '+orderTime+'</h3><p>Im the collapsible set content for section 1.</p></div>'); 
       $(".orderHistoryCollapsible").collapsibleset(); 
       $(".orderHistoryCollapsible").collapsibleset('refresh');  
     }; 
    } 

    db.transaction(function(qry){ 
     qry.executeSql("SELECT * FROM orders", [], function(tx, results){ 
      //query was a success 
      var len = results.rows.length; 
      for (var i=0; i<len; i++){ 
       var orderTime = results.rows.item(i).orderTime; 
       getRetailerName(results.rows.item(i).retailerID, callbackFn(orderTime)); 
      } 
     }); 

    });  

Answer 2

變量orderTime是在功能範圍（function(tx, results)），而不是在循環範圍。這意味着，當它在function(name)封閉拍攝，只有一個實例。當循環結束時它將具有最後一次調用的值。

可以解決這個問題，如果你在一個匿名函數

for (var i=0; i<len; i++){ 
    function() { 
     var orderTime = results.rows.item(i).orderTime; 

     var retailerName; 
     getRetailerName(results.rows.item(i).retailerID,function(name) { //this uses a callback function... need to because request to DB is a 
      retailerName = name ; 
      $('#orderHistoryCollapsible').append('<div data-role="collapsible" data-collapsed="false"><h3>'+retailerName+' - '+orderTime+'</h3><p>Im the collapsible set content for section 1.</p></div>'); 
      $(".orderHistoryCollapsible").collapsibleset(); 
      $(".orderHistoryCollapsible").collapsibleset('refresh');    
     }); 
    } 
} 

然後封閉循環體，你有一個新的作用域每次體運行時間和orderTime這樣一個新的實例。