防止多次执行同一个监听器

Question

我正在写一个 chrome 扩展。 我在chrome.tabs.onUpdate事件上有一个监听器。 在这个监听器上，我调用了一个 function，它修改了一个 class 的实例，应该是 model Z05B8C34CBD96FFBF2Z41 发生了更新

问题：在侦听器中调用的 function 是异步的，并且在第一次调用完成之前会依次进行多次修改，这会产生不希望的结果；

这是一个说明情况的简化示例。

var obj = new MyClass();

async function modifyObj( windowId, tabId, changeInfo ){
    // modify object (X)
    var window = await new Promise( (resolve,reject) => {
        chrome.windows.get(windowId, {populate: true}, (w) => resolve(w));
    });
   // modify object (Y)
}

chrome.tabs.onUpdate.addListener( (tabId, changeInfo, tab) => {
    modifyObj(tab.windowId, tab.id, changeInfo);
});

假设 3 个标签按顺序更新（例如，当您从书签中同时打开 3 个标签时）

执行运行如下

1. 标签 1 已更新
   • 匿名监听器
   • modifyObject直到await
2. 选项卡 2 已更新
   • 匿名监听器
   • modifyObject直到await
3. 表 3 已更新
   • 匿名监听器
   • modifyObject直到await
4. await调用以某种顺序得到解决，然后执行 modifyObject 的modifyObject

在第一次执行modifyObject之前， await标记为modify object (X)的代码多次运行。 由于各种原因，在原始代码中，这不可能发生。 modify object (Y)的代码严格依赖于modify object (X)中所做的修改。

我想要的是：

1. 标签 1 已更新
   • 匿名监听器
   • modifyObject直到await
   • 执行 function 的 rest
2. 选项卡 2 已更新
   • 匿名监听器
   • modifyObject直到await
   • 执行 function 的 rest
3. 表 3 已更新
   • 匿名监听器
   • modifyObject直到await
   • 执行 function 的 rest

但是，当然，我们无法控制 chrome 何时启动侦听器。

有什么有效和简单的方法可以做到这一点？

Answer 1

您可以将 modifyObj 的每次调用从modifyObj的先前调用中分离出来，以便一次不超过一个调用：

const obj = new MyClass();
let modifyProm = Promise.resolve();
async function modifyObj( windowId, tabId, changeInfo ){
    // modify object (X)
    var window = await new Promise( (resolve,reject) => {
        chrome.windows.get(windowId, {populate: true}, (w) => resolve(w));
    });
   // modify object (Y)
}

chrome.tabs.onUpdate.addListener( (tabId, changeInfo, tab) => {
    modifyProm = modifyProm.then(() => modifyObj(tab.windowId, tab.id, changeInfo));
});