这是我的chrome扩展程序的一部分,但是我不了解的部分来自javascript。
let elementsArray = [
document.getElementById("main_keywords"),
document.getElementById("search_side"),
document.getElementById("news_emotion"),
document.getElementById("news_comments")
];
for (elem of elementsArray) {
var key = elem.getAttribute("id");
chrome.storage.sync.set({ key: false }, function() {
console.log(key + " saved : " + false);
chrome.storage.sync.get({ key }, function (result) {
console.log(key + " is " + result.key)
});
});
}
我的意图是,对于elementsArray
中的每个元素,应使用该元素的ID将{key:false}
设置为chrome.storage api。结果是,仅elementsArray
的最后一个元素news_comments
被保存了4次。控制台输出如下。
news_comments saved : false
news_comments saved : false
news_comments saved : false
news_comments saved : false
news_comments is false
news_comments is false
news_comments is false
news_comments is false
Chrome API是异步的,但我不确定是否与这个概念有关。
答案 0 :(得分:1)
创建一个函数并使用参数调用它,该函数会将key
变量保存在其作用域中并记住该值。
使用该变量的代码在循环内时,循环将结束,get()
的回调仍处于挂起状态(异步回调)。因此,当执行这些回调时,该键变量必须已更新为最后一个值。
但是,当您将该代码移动到函数中并在循环内调用该函数时。在每次迭代中,将使用一个新值调用该函数,并且该值将保留在该函数内部的代码中,即使已更新外部传递的变量的值,但由于函数的范围,传递给函数的值将保持不变。阅读有关JavaScript范围的更多信息。
const update = key => {
chrome.storage.sync.set({ [key]: false }, function() {
console.log(key + " saved : " + false);
chrome.storage.sync.get({ key }, function (result) {
console.log(key + " is " + result.key)
});
});
}
for (elem of elementsArray) {
var key = elem.getAttribute("id");
update(key);
}