我发现一个很严重的问题,在一页代码中,和chrome相关的代码(例如chrome.tabs.……)全部都被放到普通代码后面去执行了,导致执行顺序大乱。例如以下的一个测试文件,每次打开一个新tab,就会输出a、b、c、d、e 五个字符,协助判断代码执行的顺序,结果发现执行顺序大大出乎我的意料,代表chrome相关的代码被放置后面执行了。可是我不想让它们分什么js还是chrome的代码,就想从上到下执行,该怎么办?
代码下载(里面有个popup.js和popup.html是多余的,可无视)
以下是background.js,其他的就不贴了
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.msgcheck=="contentjs")
{
console.log("a");
chrome.tabs.get(sender.tab.id, function(tab){console.log("b")});
console.log("c");
for(var i=0;i<2;i++)
{
console.log("d");
chrome.tabs.get(sender.tab.id, function(tab){console.log("e")});
}
//我以为最终结果是a,b,c,d,e,d,e,结果特么居然是a,c,d,d,b,e,e,连循环都能割裂,为何这么屌!
}
});
你看参数命名就知道了,callback。。。肯定是异步的,要按照你的循序,必须调整代码结构,放依次放回调里面执行
function execFor(tabid,i, max, callback) {
console.log("d");
chrome.tabs.get(tabid, function (tab) {
console.log("e")
callback();
i++;
if (i < max) execFor(tabid, i, max, callback);
});
}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.msgcheck == "contentjs") {
console.log("a");
chrome.tabs.get(sender.tab.id, function (tab) {
console.log("b")
console.log("c");
//不能直接for,异步执行的无法控制回调顺序
execFor(sender.tab.id, 0, 2, function (tab) { console.log("e") })
});
}
});
https://www.zhihu.com/question/20135407
如果是执行或者是变量赋值等乱序,去看一下闭包如何解决顺序执行的问题吧