时间戳

首页 > 解决方案 > 反应保持间隔在后台运行

javascript - 反应保持间隔在后台运行

问题描述

我在任何地方都找不到我的问题的答案。

长话短说，我有一个 Web 应用程序（MERN 堆栈），我想定期从前端（反应）向后端（节点）发出请求，即使在组件卸载或用户关闭页面时也是如此。

目前这是我的代码，如果我在那个特定的页面/路由中，它可以正常工作。但如果我关闭页面并返回，它会重置间隔。

let updateCycle; // to make sure there is only 1 interval
useEffect( () => {
if (!updateCycle)
 updateCycle = setInterval(() => {
     myFunction() // calling the function
     }, 10 * 60 * 1000); // every 10 mins
},[myFunction])

那么我该怎么做呢？还是我必须将整个事情移到后端？

标签： javascriptnode.jsreactjsredux

解决方案

您需要的是该钩子的清理功能

基本上 useEffect 钩子可以返回一个在清理该钩子时将被调用的函数。

所以你的代码现在必须是：

let updateCycle
useEffect(() => {
   updateCycle = setInterval(myFunction, 10 * 60 * 1000) // Set a timer as a side effect
   return () => clearInterval(updateCycle) // Here is the cleanup function: we take down the timer
},[myFunction])

当不再需要副作用时，React 基本上会调用清理函数。

也就是说，它将在 componentUnMount 上调用它，或者就在重新调用 useEffect 基函数之前（当 myFunction 指针更改并导致效果刷新时）

如果您需要始终运行的功能，请将其移动到始终安装的组件！我不建议在组件消失时留下副作用，因为这就是您在应用程序中创建内存泄漏并且难以重现错误的方式。

顺便说一句，当用户关闭页面时保持任何类型的代码运行是完全不可能的。也许你想象错了？

推荐阅读