Javascript 如何在reactjs中每5分钟发送一次操作

我正在尝试每5分钟发送一次操作。一旦用户登录，它就必须发送操作。每5分钟后开始一次调度动作。我尝试使用setInterval，但这里的问题是，即使我注销，它仍会继续调度操作

这是我的密码 我在app.js中定义了这个keepAlive函数，并将整个应用程序包装到redux应用商店中。 这里是isAuthenticated is boolean函数。如果isAuthenticated为true，并且API.getAcessToken仅在localstorage中可用，则我希望分派操作

  function keepAlive() {
    if (
      props.isAuthenticated === true &&
      API.getAccessTokenFromLocalStorage()
    ) {
      setInterval(() => {
        props.keepTokenAlive();
      }, 100000); // 1000ms =1sec
    } else {
      return null;
    }
  }
  keepAlive();

你能做到吗

let to = null;

function keepAlive() {
    //Assign a reference to clear the interval
    to = setInterval(() => {
        if (
           props.isAuthenticated === true &&
           API.getAccessTokenFromLocalStorage()
        ) {
             props.keepTokenAlive();
        } else {
            // If not passing the condition, clear the interval
            clearInterval(to);
        }            
    }, 100000); // 1000ms =1sec
}

 keepAlive();
 

你能做到吗

let to = null;

function keepAlive() {
    //Assign a reference to clear the interval
    to = setInterval(() => {
        if (
           props.isAuthenticated === true &&
           API.getAccessTokenFromLocalStorage()
        ) {
             props.keepTokenAlive();
        } else {
            // If not passing the condition, clear the interval
            clearInterval(to);
        }            
    }, 100000); // 1000ms =1sec
}

 keepAlive();
 

---

您可以创建一个自定义的React钩子。有一些库可以解决这个问题，但涉及的代码很小，您可以自己完成

例如，这是NPM包中的源代码：

从“react”导入{useffect，useRef}； const useInterval=回调，延迟=>{ const savedCallback=useRef； 使用效果 => { savedCallback.current=回调； }, [回拨] ; 使用效果 => { 常量处理程序=…args=>savedCallback.current…args； 如果延迟！==null{ const id=setIntervalhandler，延迟； return=>clearIntervalid； } }, [延迟] ; }; 导出默认使用间隔； 您可以这样使用它：

常量MyComponent==>{ useInterval=>{ //你的代码在这里 }, 5000; 返回空 }

---

您可以创建一个自定义的React钩子。有一些库可以解决这个问题，但涉及的代码很小，您可以自己完成

例如，这是NPM包中的源代码：

从“react”导入{useffect，useRef}； const useInterval=回调，延迟=>{ const savedCallback=useRef； 使用效果 => { savedCallback.current=回调； }, [回拨] ; 使用效果 => { 常量处理程序=…args=>savedCallback.current…args； 如果延迟！==null{ const id=setIntervalhandler，延迟； return=>clearIntervalid； } }, [延迟] ; }; 导出默认使用间隔； 您可以这样使用它：

常量MyComponent==>{ useInterval=>{ //你的代码在这里 }, 5000; 返回空 }

---

这回答了你的问题吗？这回答了你的问题吗？是的，让我试试这个。这很管用，但在第一次发送时，这开始给我带来一些其他问题。它说isAuthenticated是未定义的。但它是在redux存储中以布尔类型定义的。请记住，当计算机进入休眠状态时，间隔会暂停。当选项卡不可见/不活动时，某些浏览器还会限制间隔。因此，5分钟并不总是正好5分钟。是否有其他方法处理此刷新令牌？我在这里多次添加这个问题，但我没有得到正确的答案。如果你知道任何其他的方法，你能帮我吗？是的，让我试试这一个。这项工作，但这开始给我一些其他问题，而使第一次派遣。它说isAuthenticated是未定义的。但它是在redux存储中以布尔类型定义的。请记住，当计算机进入休眠状态时，间隔会暂停。当选项卡不可见/不活动时，某些浏览器还会限制间隔。因此，5分钟并不总是正好5分钟。是否有其他方法处理此刷新令牌？我在这里多次添加这个问题，但我没有得到正确的答案。如果你知道任何其他方法，请你帮助我，如果我把条件。就像我在问题中提供的代码一样。我的意思是，我只想让它在用户授权的情况下发送操作。@adityakumar只要做任何你想做的事情。//如果我设置了条件，你的代码在这里就能工作。就像我在问题中提供的代码一样。我的意思是，我只想让它在用户获得授权的情况下发送操作。@adityakumar只需在//您的代码所在的位置执行您想要的任何操作