reactjs 为什么date对象在一个示例中正确运行,而在另一个示例中却不正确?

pxy2qtax  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(97)

我有一个问题,我不能缠绕我的头。日期字符串是不同的行为在两个示例中,我认为我在做同样的事情。
因此,本质上,当我将new Date(“Jan 25,2023 15:37:25”).getTime()赋给countDownDate时,这里的计时器(由setInterval控制)将根据输入到date构造函数中的字符串文字从我期望的位置开始计时,即使刷新时也会持续计数。
问题是当我需要动态地计算未来时间的时候。突然间,当我计算一个动态的未来时间字符串的时候:

var timer = new Date().getTime() + 620840000;
    var date = new Date(timer);
    var dateStr = date.toString();
    var countDownDate new Date(dateStr).getTime()

这在刷新时不再持续。
现在我意识到通常你需要把时间存储在本地存储器甚至服务器中,以允许时间持久化。这是有意义的。我也理解计时器在每次组件挂载时都要重新计算。然而,我不是在日期构造函数中放入一个静态字符串文字来做同样的事情吗?如果这是一个设置和重置的问题,带有字符串文字的日期构造函数不应该与动态计算的字符串作用相同吗?
此处代码:https://github.com/Cerezze/timerTest

import logo from './logo.svg';
import './App.css';
import { useEffect } from 'react';

function App() {

  useEffect(() => {
    var timer = new Date().getTime() + 620840000;
    var date = new Date(timer);
    var dateStr = date.toString();

    var countDownDate = new Date("Jan 25, 2023 15:37:25").getTime(); // <-- Why does this persist on refresh
    /*var countDownDate new Date(dateStr).getTime();*/               // <-- and this does not persist on refresh?
    
    const interval = setInterval(() => {
      var now = new Date().getTime();

      var distance = countDownDate - now;

      var days = Math.floor(distance / (1000 * 60 * 60 * 24));
      var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((distance % (1000 * 60)) / 1000);

      console.log(days, hours, minutes, seconds); 
    }, 1000);
    return (distance) => {
        if(distance < 0){
        clearInterval(interval);
        console.log('Expired');
      }
    }
  }, []);

  return (
    <div className="App">
    </div>
  );
}

export default App;
tzdcorbm

tzdcorbm1#

如果我理解你的问题,那么答案就是

var timer = new Date().getTime() + 620840000;

每次运行javascript时,您都会创建一个不同的日期/时间(根据系统时钟,new Date()将始终是当前时间)

var date = new Date(timer);
var dateStr = date.toString();

但是在这里,你有一个固定的日期/时间,每次都保持不变。

var countDownDate = new Date("Jan 25, 2023 15:37:25").getTime(); // <-- Why does this persist on refresh

这回答了你的问题吗?我本想把它放在注解中,但是我想在代码中告诉你,我认为你的误解在哪里

相关问题