Question

当我从PHP世界来到这里时，我是JS和Chrome扩展的初学者。所以我在background.js中有一段代码：

 function findAtab(regex){
    var t = false;
    alert('t1: '+t);
    chrome.tabs.getAllInWindow(function(tabs){
        tabs.forEach(function(tab){
            if (regex.test(tab.url)) {
                t = tab.id;
                alert('t2: '+t);
            }
        });
    });
    alert('t3: '+t);
    return t;
}

var someRegex = /^https?:\/\/(?:[^./?#]+\.)?somesite\.com/;

var theTab = findAtab(someRegex);

现在，当我运行代码时，它向我显示t1：false，然后是t3：false，最后是t2：1060（我有一个打开兼容站点的选项卡）。这是为什么？据我所知，它与JS执行代码的方式有关（单线程？），但在哪里挖？

Answer 1

这是因为getAllInWindow是一个异步函数。这意味着它将被推送到不同的堆（如果我是正确的）被推进。函数完成后，它将被推回到Javascrip事件循环，排队作为循环中的最后一项。

所以会发生什么：t1被调用并且你看到一个警告，getAllInWindow被调用并被推送到另一个堆。然后调用t3并向窗口发出警报。现在t2已经完成并推回到事件循环中，只是作为行中的第三个项目，并为你创建一些混乱:)

在这里阅读更多内容可能会更好：Javascript event loops 这一点帮助我了解了这种情况：Philip Roberts: What the heck is the event loop anyway?

Javascript + Chrome扩展奇怪的代码执行顺序

1 个答案: