可见性更改未按预期运行

Question

可见性更改的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
    }
}

若要解决此问题，您不希望执行该函数，而是提供该函数的引用。这是您的addEventListener()和removeEventListener()中从doEverything()到doEverything的简单更改：

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

这将仅在切换选项卡时运行一次警报。