侦听器一直在错误的 if 语句中执行

Question

我正在编写一个 Chrome 扩展程序，它有一个内容脚本，可以对 seclectionchange 事件执行某些操作，但希望这些操作仅在用户在扩展程序设置中启用它们时才执行。

这是我的代码：

const readOption = async(key) => {
  return new Promise((resolve, reject) => {
    chrome.storage.sync.get([key], function(result) {
      if (result[key] === undefined) {
        reject();
      } else {
        resolve(result[key]);
      }
    });
  });
};

async function myAsyncFunction() {
  let checkVariable = await readOption('mykey');

  if (checkVariable === true) {

    document.addEventListener('selectionchange', function(e) {
      // Doing stuff
    }, false);
  }
}

myAsyncFunction();

chrome.storage.onChanged.addListener((changes, area) => {
  if (area === 'sync' && changes.mykey) {
    myAsyncFunction();
  }
});

这就是问题所在。当我通过设置断点将变量从 true 更改为 false 时，if (checkVariable === true) 被 onChanged 侦听器触发执行，然后它的主体被跳过，因为变量为 false。

但之后selectionchange 就像不在 if 语句中一样执行。我必须重新加载页面以防止其执行。

我该如何解决这个问题？我想只有在 mykey 设置为 false 时才删除 onchanged 监听器中的 selectionchange 监听器，但我该怎么做呢？

Answer 1

当您在未指定 {once: true} 的情况下注册事件侦听器时，它将在此页面中永远处于活动状态，直到您使用具有相同函数引用的 removeEventListener 显式取消注册它。为确保相同，您可以简单地将函数移动到将持久的外部范围：

async function myAsyncFunction() {
  let checkVariable = await readOption('mykey');
  let onoff = `${checkVariable ? 'add' : 'remove'}EventListener`;
  document[onoff]('selectionchange', onSelChange);
}

function onSelChange(e) {
  // Doing stuff
}