避免 setInterval 被清除

Question

我的网站上有一个简单的时钟组件，代码如下：

import { useEffect, useState } from 'react'

const Clock = () => {
  const [time, setTime] = useState()

  useEffect(() => {

    setInterval(() => {
      const dateObject = new Date() //` Date Object
      var currentTime = dateObject.getHours() + ' : ' + dateObject.getMinutes()

      setTime(currentTime)

    }, 1000)

  }, [])

  return <div>{time}</div>
}

export default Clock

但在其他一些页面上，我有一个运行循环来清除该特定页面上的超时，但最终发生的是我的时钟间隔也被清除了。 （为我想要的功能清除该页面上的超时非常重要，这会清除当前运行的所有超时。）
代码为：

const highestId = window.setTimeout(() => {
  for (let i = highestId; i >= 0; i--) {
    window.clearTimeout(i)
  }
}, 0)

我想保留时钟间隔运行但同时取消所有其他间隔。

Answer 1

您可以跟踪 setTimeout 个 ID 或 setInterval 个 ID，然后只清除超时 ID。

/* Make sure the timeoutIDs doesn't get reinitialised everytime you run this code, 
probably store it some central service that remains in memory, or declare it globally
*/
const timeoutIDs = [];
const id = window.setTimeout(() => {
  for (let i = 0; i < timeoutIDs.length; i++) {
    window.clearTimeout(timeoutIDs[i])
  }
}, 0);
timeoutIDs.push(id)

或：

import { useEffect, useState } from 'react'

export const IntervalSet = new Set();

const Clock = () => {
  const [time, setTime] = useState()

  useEffect(() => {

    const id = setInterval(() => {
      const dateObject = new Date() //` Date Object
      var currentTime = dateObject.getHours() + ' : ' + dateObject.getMinutes()

      setTime(currentTime)

    }, 1000)
    
    set.add(id);

  }, [])

  return <div>{time}</div>
}

export default Clock;

import { IntervalSet } from 'somePath'; 

const highestId = window.setTimeout(() => {
  for (let i = highestId; i >= 0; i--) {
    if(IntervalSet.has(i)) {
      continue;
    }
    window.clearTimeout(i)
  }
}, 0)

避免 setInterval 被清除

Avoid setInterval from being Cleared

javascript

frontend

json

typescript

reactjs