How to generate Random number in JavaScript with custom delays

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.

timeout of 20 sec ... but your code uses 6000 milliseconds ... and doesn't even attempt to stop - and there's no "clock" to stop it — Jaromanda X
– Jaromanda X, Commented Aug 2, 2022 at 6:36

Sohaib Ashraf · Accepted Answer · 2022-08-02 09:17:47Z

1

Wrap the setInternal inside useEffect hook.

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

answered Aug 2, 2022 at 9:17

Sohaib Ashraf

80613 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to generate Random number in JavaScript with custom delays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related