JavaScript、变量范围、变量求值顺序

Question

我正在使用 Protractor 测试一些 angularjs 应用程序，并遇到了这样的问题:

var counter = 0;
redButton.click();
allImages.each(function(element) {
    element.isDisplayed().then(function(isDispl){
        if(isDispl === true){
            expect(element.getInnerHtml()).toContain('red');
            counter++;
            console.log("I'm here!")
        }
    });
});
console.log(counter);

输出为:

0
I'm here!
I'm here!

虽然我期望输出:

I'm here!
I'm here!
2

为什么会这样呢？为什么变量 counter 不等于 2——条件 isDispl === true 被满足的次数？

Answer 1

JavaScript 中一次只能运行一个函数(这有点简化，但也有异常(exception))。

在发生其他事情之前，main 函数会一直运行。由于该函数包含 console.log(counter);，因此它会记录counter 当时的值。

函数完成后，事件循环可以查找已触发的事件。

元素已显示，因此它们的 promise 会触发。每次发生这种情况(两次)，您都会收到一条消息，并且 counter 的值会发生变化。

由于这种情况发生在您唯一一次输出 counter 的值之后，因此您永远不会观察到它达到 2。