每当更改时间时都必须触发SetInterval吗?

时间:2019-05-07 07:34:32

标签: javascript jquery reactjs date react-hooks

我使用setInterval来更新时间,为此我将60000s设置为间隔。每当我加载页面时,我将获得时间,并且从刷新页面开始的1分钟后时间就会更新,但时间不会相应更新。因此,更新时间会有所延迟。

   const UpdateTime= (props) => {
    let date = new Date();
    const [dateTime, setDateTime] = useState({
        curTime: date.toLocaleDateString(),
        timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
        curDay: date.toLocaleDateString("en-US", { weekday: "short" })
    });
    useEffect(() => {
        const interval = setInterval(() => {
            let date = new Date();
            setDateTime({
                curTime: date.toLocaleDateString(),
                timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
                curDay: date.toLocaleDateString("en-US", { weekday: "short" })
            });
        },
            60000
        );
        return () => { clearInterval(interval) }
    }, [])
}

加载页面后,每当date.getSeconds()从那里达到00时,我都必须触发setinterval函数。

2 个答案:

答案 0 :(得分:1)

每当date.getSeconds()首次变为0时,我就使用setTimeOut调用间隔函数。但是我面临的问题是我无法清除间隔。我在控制台中收到更多“内部超时和内部间隔”,这并没有清除以前的日志,我希望超时为1,每当setInterval运行时,我都必须在控制台中获取“内部间隔”

const DateTime = (props) => {
let date = new Date();
let initialDiff = (date.getSeconds() == 0) ? 0 : (59 - date.getSeconds());
setTimeout(() => {
    triggerDateUpdate()
    console.log("inside timeout")

}, initialDiff * 1000);
const [dateTime, setDateTime] = useState({
    curTime: date.toLocaleDateString(),
    timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
    curDay: date.toLocaleDateString("en-US", { weekday: "short" })
});
const interval = () => {
    console.log("inside interval")
    let date = new Date();
    setDateTime({
        curTime: date.toLocaleDateString(),
        timeStr: date.toLocaleTimeString().replace(/:\d{2}\s/, " "),
        curDay: date.toLocaleDateString("en-US", { weekday: "short" })
    });
}
let triggerDateUpdate = () => {
    interval();
    setInterval(() => {
        interval();
    }, 60000)
}

答案 1 :(得分:0)

好吧,如果您想采用这种方式,我想除了此以外别无解决方案:
因为不能仅通过模拟间隔(How to trigger a setInterval function on a user click?)来“触发”间隔,所以可以使用将由间隔调用的函数。然后,您可以在date.getSeconds()达到00时调用该函数。但是,您将需要第二个间隔,该间隔每秒触发一次,直到达到00,然后您才能清除它。调用它之后,第二个是00,则将间隔设置为60秒。
必须重置60s间隔,否则将再次不正确。