我使用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函数。
答案 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间隔,否则将再次不正确。