代码之家 › 专栏 › 技术社区 › Ð¤ÐµÐ´Ñ Ð Ð°Ð²ÑÐµÐµÐ²

如何在react-js中使用Date()在后台增加变量?

javascript-date rxjs reactjs javascript

Ð¤ÐµÐ´Ñ Ð Ð°Ð²ÑÐµÐµÐ² · 技术社区 · 1 年前

我编写的代码应该使用Date()模块在后台每10秒递增一次strong变量

import React, { useState, useEffect } from "react";

export default function App() {
  const [strong, setStrong] = useState(200);
  function restoreEnergy() {
    const now = Math.floor(Date.now() / 1000);
    const lastRestoreTime = parseInt(localStorage.getItem("lastRestoreTime"));

    if (lastRestoreTime) {
      const timeSinceLastRestore = (now - lastRestoreTime) / 10;
      if (timeSinceLastRestore >= 10) {
        const currentEnergy = parseInt(localStorage.getItem("strong"));
        const restoredEnergy = Math.floor(currentEnergy + timeSinceLastRestore / 10);
        localStorage.setItem("strong", restoredEnergy);
        setStrong(restoredEnergy);
        localStorage.setItem("lastRestoreTime", now.toString());
      }
    } else {
      localStorage.setItem("strong", 200);
      localStorage.setItem("lastRestoreTime", now.toString());
    }
  }

  useEffect(() => {
    const lastRestoreTime = localStorage.getItem("lastRestoreTime");
    const intervalId = setInterval(restoreEnergy, 10000);
    return () => clearInterval(intervalId);
  }, []);
  return ({strong})
}

它只在选项卡打开时工作,而在后台不工作,为什么?

我试图用不同的数学运算来得到想要的结果,但它们不起作用

编辑:我需要在选项卡完全关闭时记住计时器,因此,在重新启动时,计时器值被添加到计时器值的原始值中,并获得在后台工作的效果(就像在许多有每日奖励的游戏中一样)

1 回复 | 直到 1 年前

GifftyCode 1 年前

我建议您在重新打开选项卡时计算当前时间和上次还原时间之间的差异。这样,您可以根据自上次打开选项卡以来经过的时间恢复能量,确保在重新打开选项卡后立即应用在关闭选项卡时应该发生的任何能量恢复

    import React, { useState, useEffect } from "react";

    export default function App() {
    const [strong, setStrong] = useState(200);

    function restoreEnergy() {
      const now = Math.floor(Date.now() / 1000);
      const lastRestoreTime = 
        parseInt(localStorage.getItem("lastRestoreTime"));

      if (lastRestoreTime) {
        const timeSinceLastRestore = now - lastRestoreTime;
        const energyToRestore = Math.floor(timeSinceLastRestore / 10);

        if (energyToRestore > 0) {
          const currentEnergy = parseInt(localStorage.getItem("strong")) || 
              200;
          const restoredEnergy = currentEnergy + energyToRestore;
          localStorage.setItem("strong", restoredEnergy);
          setStrong(restoredEnergy);
          localStorage.setItem("lastRestoreTime", now.toString());
        }
      } else {
        localStorage.setItem("strong", 200);
        localStorage.setItem("lastRestoreTime", now.toString());
      }
    }

    useEffect(() => {
      restoreEnergy(); 

      const intervalId = setInterval(() => {
        restoreEnergy();
      }, 10000); 

      return () => clearInterval(intervalId);
    }, []);

    return (

    );
  }