H5网页切换后台计时器不更新问题,页面是否可见

623 阅读1分钟

网页切换后台,或者切换tab计时器不准确了,这时候需要在页面可见状态时候初始化下计时器数据就OK了 利用Document.hidden返回布尔值,页面隐藏状态返回true,否则返回false。 来判断页面是否可见。 官方链接: developer.mozilla.org/zh-CN/docs/…

React版本

useEffect(() => {
    const checkBrowserChange = () => {
        // Document.hidden(只读属性)返回布尔值,页面隐藏状态返回true,否则返回false。
        if (!document.hidden) {
            // 页面可见时候进行操作,例如初始化数据 init();
        }
    };
    document.addEventListener('visibilitychange', checkBrowserChange);
    return () => {
        document.removeEventListener('visibilitychange', checkBrowserChange);
    };
}, []);