Question

所以我试图从像这样的列表名称组中的选项卡列表中创建一组选项卡。

console.log("groups.length: " + groups.length);
// loop through groups
    for (var i = 0; i < groups.length; i++) {
        // create the new tab
        console.log("for loop ran: " + i);

        // cannot use i in here because async
        chrome.tabs.create({
            windowId: win.id,
            index: i,
            url: groups[i].urls[0]
        }, function(tab){
            console.log("i: " + i);
            groups[i].tabId = tab.id;  // this is not working right!!!
        });
    }

所以在终端我得到..

groups.length: 2
popup.js:87 for loop ran: 0
popup.js:87 for loop ran: 1
popup.js:95 i: 2
popup.js:95 i: 2

有人可以向我解释这里发生了什么。我认为即使任务是异步的，它仍然应该输入i的值，就像第一次调用时一样。另外为什么95行会显示i = 2？我怎么能超过1？我真的很困惑，感谢善良的互联网程序员。

Answer 1

groups.forEach(function (group, i) {
    chrome.tabs.create({
        windowId: win.id,
        index: i,
        url: group.urls[0]
    }, function(tab){
        group.tabId = tab.id;
    });
});

Answer 2

代码运行后，i为2，因为在for循环中，在每个循环周期后执行增量表达式i++，然后检查条件以确定。所以代码执行如下： first_cycle -> increment (i is 1 now) -> check_condition (true) -> second_cycle -> increment (i is 2 now) -> check_condition (false) -> abort loop

将您的回调功能更改为：

function(tab) {
    console.log("index" + tab.index);
    groups[tab.index].tabId = tab.id;
}

因为这样，回调函数中的代码不使用外部函数的变量i（更多关于词法范围和闭包here

...或使用artit91的解决方案。

在for循环中调用异步chrome.tabs.create

2 个答案: