监听器继续执行 false 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
}

监听器继续执行 false if 语句

Listener keeps executing in false if statement

javascript

google-chrome

add-on

google-chrome-extension