javascript - JavaScript 变量作用域/OOP 和回调函数需要帮助

Question

我认为这个问题超出了典型的变量范围和闭包范围，或者我是个白痴。无论如何……

我正在 jQuery 插件中动态创建一堆对象。该对象看起来像这样

function WedgePath(canvas){
    this.targetCanvas = canvas;
    this.label;
    this.logLabel = function(){ console.log(this.label) }
}

jQuery 插件看起来像这样

(function($) {
  $.fn.myPlugin = function() {

  return $(this).each(function() {

     // Create Wedge Objects
     for(var i = 1; i <= 30; i++){ 
      var newWedge = new WedgePath(canvas);
      newWedge.label = "my_wedge_"+i;
      globalFunction(i, newWedge]);
     } 
    });
  }
})(jQuery);

所以...插件创建了一堆 wedgeObjects，然后为每个调用“globalFunction”，传入最新的 WedgePath 实例。全局函数看起来像这样。

function globalFunction(indicator_id, pWedge){

    var targetWedge = pWedge; 
    targetWedge.logLabel();

}

接下来发生的是控制台正确记录每个楔形标签。但是，我需要在 globalFunction 中增加一点复杂性。所以它实际上看起来像这样......

function globalFunction(indicator_id, pWedge){

        var targetWedge = pWedge; 

        someSql = "SELECT * FROM myTable WHERE id = ?";
        dbInterface.executeSql(someSql, [indicator_id], function(transaction, result){

            targetWedge.logLabel();

        })

    }

这里发生了很多事情，所以我会解释。我正在使用客户端数据库存储(我称之为 WebSQL)。 'dbInterface' 我创建的一个简单 javascript 对象的实例，它处理与客户端数据库交互的基础知识 [显示在这个问题的末尾]。 executeSql 方法最多接受 4 个参数

• SQL 字符串
• 一个可选的参数数组
• 一个可选的 onSuccess 处理程序
• 可选的 onError 处理程序(本例中未使用)

我需要做的是:当 WebSQL 查询完成时，它会获取一些数据并处理特定楔形的某些属性。但是，当我在 onSuccess 处理程序中的 WedgePath 实例上调用“logLabel”时，我得到了在插件代码中创建的最后一个 WedgePath 实例的标签。

现在我怀疑问题出在var newWedge = new WedgePath(canvas);线。所以我尝试将每个 newWedge 插入一个数组，我认为这会阻止该行在每次迭代时替换或覆盖 WedgePath 实例......

wedgeArray = [];

// Inside the plugin...
for(var i = 1; i <= 30; i++){ 
    var newWedge = new WedgePath(canvas);
    newWedge.label = "my_wedge_"+i;
    wedgeArray.push(newWedge);
} 

for(var i = 0; i < wedgeArray.length; i++){
    wedgeArray[i].logLabel()
}

但是，我再次创建了 WedgePath 的最后一个实例。

这让我抓狂。对于问题的长度，我深表歉意，但我想尽可能清楚。

结束

============================================= ===============

另外，这里是 dbInterface 对象的代码，应该是相关的。

function DatabaseInterface(db){

 var DB = db;

 this.sql = function(sql, arr, pSuccessHandler, pErrorHandler){

  successHandler = (pSuccessHandler) ? pSuccessHandler : this.defaultSuccessHandler;
  errorHandler = (pErrorHandler) ? pErrorHandler : this.defaultErrorHandler;

  DB.transaction(function(tx){

   if(!arr || arr.length == 0){
    tx.executeSql(sql, [], successHandler, errorHandler);
   }else{
    tx.executeSql(sql,arr, successHandler, errorHandler)
   }

  });      
 }

 // ----------------------------------------------------------------
 // A Default Error Handler
 // ----------------------------------------------------------------

 this.defaultErrorHandler = function(transaction, error){
  // error.message is a human-readable string.
     // error.code is a numeric error code
     console.log('WebSQL Error: '+error.message+' (Code '+error.code+')');

     // Handle errors here
     var we_think_this_error_is_fatal = true;
     if (we_think_this_error_is_fatal) return true;
     return false;
 }


 // ----------------------------------------------------------------
 // A Default Success Handler
 // This doesn't do anything except log a success message
 // ----------------------------------------------------------------

 this.defaultSuccessHandler = function(transaction, results)
  {
      console.log("WebSQL Success. Default success handler. No action taken.");
  }    
}

Answer 1

我猜这是因为客户端数据库存储像 AJAX 调用一样异步运行。这意味着它不会为了等待调用方法的结果而停止调用链。

因此，javascript 引擎在运行 globalFunction 之前完成了 for 循环。

要解决此问题，您可以在闭包内执行数据库查询。

function getDataForIndicatorAndRegion(indicator_id, region_id, pWedge){ 
    return function (targetWedge) { 
        someSql = "SELECT dataRows.status FROM dataRows WHERE indicator_id = ? AND region_id = ?"; 
        dbInterface.sql(someSql, [indicator_id, region_id], function(transaction, result) {
            targetWedge.changeColor(randomHex());
        });
    }(pWedge);
}

这样您就可以为每次执行保留 pWedge。由于第二种方法是自行调用它并将 pWedge 现在作为参数发送。

编辑:更新评论中的代码。并对其进行了更改。回调函数可能不应该被自己调用。如果它自己调用它，则函数的结果作为参数传递。另外，如果它不起作用，请尝试传递其他参数。