Question

visibilitychange的MDN页面声明“当选项卡的内容变得可见或被隐藏时会触发它”。但是，当我运行以下代码片段时，我立即得到一个无限的警报链，因此它显然是不断被解雇的。为什么会这样？

function doEverything() {
    if(document.visibilityState == 'visible') {
        alert(document.visibilityState);
        document.removeEventListener("visibilitychange", doEverything());
    }
}

document.addEventListener("visibilitychange", doEverything());

Answer 1

您正在调用该函数，而不是将其作为参数传递。

document.addEventListener("visibilitychange", doEverything);

和

document.removeEventListener("visibilitychange", doEverything);

Answer 2

为什么会发生这种情况？

原因是因为您在永无止境的循环中不断执行doEverything函数。

1）doEverything()首先在这里执行：

document.addEventListener("visibilitychange", doEverything());

2）doEverything()进入循环，不断显示alert：

function doEverything() {
    if(document.visibilityState == 'visible') {
        alert(document.visibilityState);
        document.removeEventListener("visibilitychange", doEverything());
    }
}

以上可以看作相当于：

function doEverything() {
    if (true) {
        doEverything(); // loop
    }
}

要解决此问题，您不想执行该功能，而是提供该功能的参考。这是doEverything()和doEverything中addEventListener()到removeEventListener()的简单更改{/ 1}}

function doEverything() {
    if(document.visibilityState == 'visible') {
        console.log('hi');
        document.removeEventListener("visibilitychange", doEverything);
    }
}

document.addEventListener("visibilitychange", doEverything);

切换选项卡时，只会运行一次警报。

visibilitychange不会按预期运行

2 个答案: