启动和停止自动递增滑块组件

如何解决启动和停止自动递增滑块组件

我使用的是代表 24 小时行情的 material-ui 滑块。小时值驱动应用程序中显示的其他信息，并且在用户手动设置时效果很好。试图让滑块自动增加是我遇到问题的地方。我正在尝试支持开始和停止自动每小时增量的播放和停止功能。我能够成功启动它，但无法通过我当前的设置停止它。当用户按下停止按钮时，我需要帮助让滑块停止其值。

function App() {

 const [selectedHour,setSelectedHour] = React.useState(5);
 const [hourCycleIsOn,setHourCycle] = React.useState(false);

  var i = 1;
  const cycleHours = (value) => {
    setTimeout(function () {
      if (i < 23 && value === true) {
        i++;
        handleHourChange(i)
        cycleHours(true);
      }
    },500)

  }

  const handleHourCycle = () => {
    setHourCycle(!hourCycleIsOn);
  };

 const handleHourChange = (value) => {
    setSelectedHour(value);
  };

 var button =  {};
  if (hourCycleIsOn ==false) {
    button = <Button variant="outlined" color="primary" onClick={handleHourCycle} endIcon={<PlayCircleOutlineIcon />}>Play </Button>;
  } else {
    button =   <Button variant="contained"color="secondary" onClick={handleHourCycle} endIcon={<PauseCircleOutlineIcon />}>Pause </Button>;
  }

return   <Box sx={{ width: 300 }}>
            <Grid container spacing={2} alignItems="center">
              <Grid item>
                <label htmlFor="icon-button-file">
          {button}
                </label>
              </Grid>
              <Grid item xs>
                <Slider
                  defaultValue={5}
                  value={selectedHour}
                  aria-labelledby="discrete-slider"
                  valueLabeldisplay="auto"
                  onChange={handleHourChange}
                  step={1}
                  marks
                  min={0}
                  max={23}
                />
              </Grid>
            </Grid>
          </Box>

}