javascript - 对象在 panel.port.on 上返回两次

Question

我遇到过这样的问题，即来自 contentScriptFile 的数据在每个调用函数上以渐进方式返回，例如第一次调用它只返回 1 个实例，第二次调用它返回 2 个实例，第三次调用它返回 3 个实例。

主要.js:

var panel = panels.Panel({
    width: 270,
    height: 255,
    contentURL: self.data.url("panel.html"),
    contentScriptFile: self.data.url("panelScript.js"),
});

function handleClick(state) {
    panel.show({
        position: button
    });
}

panel.on("show", function() {
    panel.port.emit("pane");
});

panel.port.on("check", function(options) {
    panel.hide();
    console.log(options);
});

面板脚本.js:

self.port.on("pane", function onShow() {
    selectChoosen.addEventListener("click", function onClick(event) {
        self.port.emit("check", options());
    }, false);

});

function options() {
    return selectedOptions;
};

你能帮我弄清楚如何修复它吗？

Answer 1

这是因为您在每次调用 onShow 处理程序时都添加了点击处理程序。我想你想做的是:

selectChoosen.addEventListener("click", onClick, false);

function onClick(event) {
  self.port.emit("check", options());
}

function options() {
    return selectedOptions;
};

...这样您只需添加一次点击事件监听器。