两个独立函数的 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');            
                });
            }
        });

    });     

基本上，代码运行两个单独的数据库查询并检索要放入 ListView 中的数据。 getRetailerName 函数提供了一个在下面的查询中使用的回调，该回调将两组数据添加到“orderHistoryCollapsible”div。

我的问题是，也应该插入到 DOM 中的 orderTime 值每次都会返回循环中的最后一个值。几乎就像两个查询都需要作为回调提供？但后来我不确定如何将数据附加到正确的位置..

如有任何帮助，我们将不胜感激

Answer 1

代码中的

var orderTime 可能会产生误导，因为在 javascript 中，局部变量的范围不限于它们的封闭 block (如 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));
            }
        });

    });