我正在撰寫一個 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時才洗掉selectionchange監聽器中的onchanged監聽器，但是我該怎么做呢？
uj5u.com熱心網友回復：
如果您注冊事件偵聽器而不指定{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
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/393571.html