for循环中的函数。仅最后一个元素会受到影响

时间:2019-11-18 14:44:18

标签: javascript google-chrome-extension

这是我的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是异步的,但我不确定是否与这个概念有关。

1 个答案:

答案 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);
}