javascript - 窗口消息事件有时触发不止一次

Question

我的页面中有一个 IFrame。我正在使用 postmessage 在父页面和子页面的脚本之间建立通信。我还有一个 polar 来反射(reflect) Iframe 在所有使用 cookie 的选项卡中最小化和最大化状态。

但问题是我有一个计数器，当我的子页面发送带有特殊对象的消息时，它实际上会增加。但是消息事件在父页面中触发了不止一次。如果它触发不止一次，计数器就会出错。这种情况不会一直发生。有时它工作得很好，有时却不行。跟极地有关系吗？因为当我对此发表评论时，一切正常。

这里是监听器

function listenIframe() {
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];       

    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

    // Listen to message from child IFrame window
    eventer(messageEvent, function (e) {
        if (e.data == xyz) {
            close();
        } else if (e.data == abcd) {
           //increase Count;
        }
    }, false);
}

这是轮询器

function fn(start) {
    var x, y, z;

    if (start) {
        j.k= setTimeout(function stateChangePollar() {
            // show or hide logic here

            setTimeout(stateChangePollar, 1000);
        }, 1000);
    }
    else {
        clearTimeout(j.k);
    }
}

Answer 1

这可能是因为多次调用了 addEventListener，很可能是在循环中或在不同的文件中。

事实上，每次调用 addEventListener 方法时，都会有一个新的处理函数附加到事件堆栈，并在事件触发时执行。

假设您对 window 对象的 resize 事件感兴趣:

function resizeHandler(e) {
   console.log("Window is resized");
}

window.addEventListener("resize", resizeHandler);
window.addEventListener("resize", resizeHandler);

如果现在调整窗口大小，在控制台中您将拥有:

Window is resized
Window is resized

因此，乍一看似乎事件被调用了多次，而事实是事件只被调用了一次，但多个处理程序正在监听该事件。

您可以通过确保在您的代码中为该特定事件只有一个 addEventListener 来解决此问题。