如何使用自定义延迟在 JavaScript 中生成随机数

Question

I wrote the code for random number generator in javascript with setTimeout function. The code is given below.

 const [number, setnumber] = useState();
      function randomNumber() {
        let number1 = Math.floor(Math.random() * 21 + 1);
        setnumber(number1);
      }
      setInterval(() => {
        randomNumber();
      }, 6000);

But it keeps randomizing infinitely after few seconds.

The requirement is to generate number after the timeout of 20 sec and keep randomize the number for next 4 seconds till the clock is reset to zero.

and the loop countinous

  <CircularProgress
            trackColor="inherit"
            capIsRound
            thickness={'6px'}
            className="circlular progress"
            value={80}
            size={'500px'}
            color={'#20fc94'}
            alignItems={'center'}
            justifyContent={'center'}
            display={'flex'}
          >
            <CircularProgressLabel
              className="circlular progress lable"
              borderRadius={'full'}
              alignItems={'center'}
              justifyContent={'center'}
              display={'flex'}
            >
              <Stack
                border={'5px solid #20FC9D'}
                borderRadius={'full'}
                h={'385px'}
                w={'385px'}
                align={'center'}
                justify={'center'}
              >
                <Stack
                  border={'5px solid #13cee6'}
                  borderRadius={'full'}
                  h={'350px'}
                  w={'350px'}
                  boxShadow={'0 0 25px #13cee6'}
                  align={'center'}
                  justify={'center'}
                >
                  <Stack
                    className="text"
                    h={'full'}
                    w={'full'}
                    p={'12'}
                    align={'center'}
                    justify={'center'}
                  >
                    <Text
                      flex={'2'}
                      h={'fit-content'}
                      w={'fit-content'}
                      fontSize={'1.4em'}
                      background={
                        'radial-gradient(circle, rgba(201,18,191,1) 0%, rgba(134,40,206,1) 51%)'
                      }
                      backgroundClip={'text'}
                      style={{ WebkitTextStroke: '1px #20fc9d' }}
                    >
                      {number}
                    </Text>
                    <Text flex={'2'} color={'#FCA120'} px={'4'} fontSize={'md'}>
                      Will the next number be Higher or Lower
                    </Text>
                  </Stack>
                </Stack>
              </Stack>
            </CircularProgressLabel>
          </CircularProgress>

here is the code for the circular progress and the number generator function call.

Answer 1

Wrap the setInternal inside useEffect hook.

   useEffect(()=>{
        setInterval( ()=> setnumber(Math.floor(Math.random * 20 + 1)),
    6000);
    },[]);