【发布时间】:2019-09-04 16:32:02
【问题描述】:
我正在使用 react 和 Cordova 构建一个混合应用程序。我需要在后台关闭应用程序 30 分钟后渲染特定组件。
我有两个事件监听器
“暂停”检测应用程序是否在后台打开。 在这里,我将 localStorage 设置为当前日期/时间。
当应用在后台打开后打开时“恢复”。 在这里我得到当前时间,本地存储的时间并检查两者之间的时间是否为 30 分钟。这就是我的问题所在,它总是返回false。我的问题与 react/cordova 更相关。有人可以解释我做错了什么吗?
// when the app is open in the backgroud
document.addEventListener("pause", () => {
localStorage.setItem("appTimeout", Date.now());
},false);
// when you reopen the app
document.addEventListener("resume", () => {
setTimeout(() => {
const minutes = 1000 * 30 * 60;
const closeTime = localStorage.getItem("appTimeout");
if(Date.now() - Number(closeTime) >= minutes){
//render component
}
}, 0);
},false);
【问题讨论】:
-
您可以启动一个计时器(就像您所做的那样),一旦达到时间限制,您就可以将一个道具传递给显示该消息的组件
-
setTimout 似乎在暂停事件监听器中不起作用。
-
您应该有某种事件,您的 React 应用程序会以某种方式处理该事件以检测 afk 模式。检测到此事件后,您需要启动计时器。如果 afk 模式被用户活动中断,您需要清除该超时。在我看来,
document不需要添加任何 eventListeners -
我最终使用了 react-idle-timer,它正是我想要的。谢谢
标签: javascript reactjs cordova hybrid-mobile-app