Search code examples
javascriptreactjschakra-ui

How to generate Random number in JavaScript with custom delays

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.

enter image description here

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.

Solution

  • Wrap the setInternal inside useEffect hook.

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