如何在异步调用中跟踪同步变量

Question

我正在使用量角器运行 e2e 测试用例。所有量角器调用都是异步调用。以下代码是量角器代码：

 gridRow.then(function (rows) {
                for (var index = 0; index < rows.length; index++) {
                    console.log(index); -------------------- 1
                    rows[index].all(by.className('ui-grid-cell-contents ng-scope')).get(1).getText().then(function (text) {
                        console.log(index); ----------------- 2
                        if (text.toUpperCase().replace(/ |-/g, '') === 'BRANCHONE') {
                            console.log(index); -------------- 3                              
                        }
                    });
                }
            });

在这种情况下 rows.length = 2。 1 处的 Console.log 按预期输出 0 和 1，但 2 和 3 处的 console.log 输出为 2，因为 then 调用是异步的。由于异步调用并行运行，同时index 的值更新为 2(index++)。

知道如何在我的异步调用中跟踪同步变量（索引）吗？

Answer 1

我通常做的是将回调函数包装在另一个函数中，以在新范围内捕获同步变量。举例来说，您现在所拥有的实际上是：

var callback = function(text) {
  // use text and index...
};
async_call(...).then(callback);

问题当然是index 变量（由回调函数捕获）在回调创建后发生了变化。因为回调函数使用 闭包 来捕获对该值的引用，所以它最终会看到更改后的值。

要在特定循环迭代期间捕获index 的值，您可以创建一个新范围，其中包含一个不会更改的新变量。基本上，您创建另一个函数并使用当前的index 调用它，并且该函数的参数捕获该特定值。然后，您可以让该函数返回另一个用作回调的函数。清除那个可怕描述的示例代码：

function createCallback(curIndex) {
  return function(text) {
    // use text and curIndex...
  };
}

//...

var callback = createCallback(index); // where index is the variable you are looping over
async_call(...).then(callback);

通过将createCallback 设为匿名函数，可以更简洁地编写：

var callback = (function(curIndex){
  return function(text) {
    // use text and curIndex...
  };
})(index);
async_call(...).then(callback);

有关 JavaScript 中的闭包和函数的更多信息，请参阅this comprehensive answer。