前端 - antd message 当浏览器在后台时弹出会在切到前台才关闭 有解决办法吗？

Question

我5秒弹一次message 浏览器切到后台一段时间后 再切到前台 会看见一大排消息然后一起隐藏，我看onClose事件在后台也是正常调用的

Answer 1

可以用 document.hidden 判断一下当前标签页是否处于活动状态，也就是大概这样

setInterval(() => document.hidden && message.success('Hello'), 5000)

希望能帮助到你。

Answer 2

切换到其他页面的时候，对 DOM 的操作会被“攒起来”，等切回来的时候一波按顺序执行。
这就是一些比较老的网页上，原本看着还正常的动画，会在重新切回来的一瞬间非常“鬼畜”地加速执行的原因。
可以判断一下页面是否可见，只在可见的时候弹出信息：

if(document.visibilityState  === "visible"){  message.info("hahaha");}

Answer 3

这个问题似乎是关于antd的Message组件在浏览器后台时弹窗不关闭的问题。这可能是因为浏览器在后台时，消息框的关闭事件（如onClose或onClickOutside）可能无法正常触发。

目前，解决这个问题的一个方案是，当浏览器进入后台时，通过一些方式来确保你的应用程序知道这个事件并做出相应的处理。具体来说，可以使用window对象的blur和focus事件来监听浏览器的前后台状态。

下面是一个基本的示例：

import { Message } from 'antd';import { useEffect } from 'react';const MyComponent = () => {  useEffect(() => {    const handleBlur = () => {      // 当浏览器失去焦点时，关闭消息框      Message.close();    };    const handleFocus = () => {      // 当浏览器重新获得焦点时，如果需要，可以重新打开消息框    };    // 监听浏览器的前后台状态    window.addEventListener('blur', handleBlur);    window.addEventListener('focus', handleFocus);    // 清理函数，在组件卸载时移除事件监听    return () => {      window.removeEventListener('blur', handleBlur);      window.removeEventListener('focus', handleFocus);    };  }, []); // 依赖项数组为空，这意味着只在组件挂载和卸载时运行这个副作用  // ...你的其他代码...};

这只是一个基本的示例，你可能需要根据具体的使用情况来调整代码。同时，请注意，不同的浏览器可能会有不同的行为，所以你可能需要测试不同的浏览器以确保兼容性。