How to setInterval with different time stop?

Question

How to setInterval with different time stop? I used this code if else but it's not working. I would like the 3 balls stop with different time, the first one is 100ms the 2nd one is 150ms and the 3rd one is 200ms.

var  roll_balls, roll_balls;

    function SetInterval() {
        var balls, balls1, balls2;
        var timesRun = 0;
        var interval = setInterval(RollingBalls, 30 );


        function RollingBalls() {
            timesRun += 1;
            console.log('tick tock');
            if (timesRun === 100) {
                console.log('done');
                clearInterval(interval);

            }

            balls = Math.floor(Math.random() * 10);
            var ballsDOM = document.querySelector('#balls-0');
            ballsDOM.src = 'numbers/ball-' + balls + '.png';

          else if (timesRun === 150) {
                console.log('done');
                clearInterval(interval);

            }

            balls1 = Math.floor(Math.random() * 10);
            var ballsDOM1 = document.querySelector('#balls-1');
            ballsDOM1.src = 'numbers/ball-' + balls1 + '.png';

          else if (timesRun === 200) {
                console.log('done');
                clearInterval(interval);

            }

            balls2 = Math.floor(Math.random() * 10);
            var ballsDOM2 = document.querySelector('#balls-2');
            ballsDOM2.src = 'numbers/ball-' + balls2 + '.png';
        }

    }

Your `if-then-else` block is not valid. There are three lines of code after the `then` part, and before the `else` part. — Ahmad, Nov 26 '18 at 05:56
Welcome to StackOverflow! Please fix the syntax error within your code (you can't have statements in between else-if statements. As of now, it can't be executed — Andreas, Nov 26 '18 at 05:57
I already have clearInterval, why should I still use the setTimeout? — John Abz, Nov 26 '18 at 06:08

score 0 · Answer 1 · answered Nov 26 '18 at 06:58

Welcome to Stack Overflow! Allow me to point out a few mistakes with both your syntax and logic which may guide you towards fixing your code

Your syntax is incorrect. Specifically, you cannot have anything between if and else if blocks

if(timesRun === 100){
    // some code
} 
// Nothing can go here. If you uncomment these lines, you'll break the syntax
// balls = Math.floor(Math.random() * 10);
// var ballsDOM = document.querySelector('#balls-0');
// ballsDOM.src = 'numbers/ball-' + balls + '.png';
else if (timesRun === 150){
    // some other code
}

Next, you probably need correct your usage of setInterval:

You are setting an interval of 30ms on RollingBalls which means that it will be called every 30ms. Now, inside RollingBalls, for ball 1, you are counting up to 100. So, ball 1 will stop at 30x100=3000ms or 3s instead of 30ms
Also, when the first ball stops, it will clear the interval and hence all balls will stop. Effectively, all balls will stop after 3s

To address this, I would recommend using different functions for all 3 balls and assign their own intervals. This will keep each function simple and you could late generalize them if you have a lot of balls ;)

var interval1 = setInterval(RollingBalls1, 30);
var interval2 = setInterval(RollingBalls2, 30);
var interval3 = setInterval(RollingBalls3, 30);

To clear the interval, you can use setTimeout inside each RollingBalls function to clear the interval for a specific ball at the specified stop time

function RollingBalls1(){
    function stopRollingBalls1(){
        clearInterval(interval1);
    }
    setTimeout(stopRollingBalls1, 100);
    // Do whatever you want to do with ball 1 here
}

If you want to continue with your original approach, change the counting logic, for example, count up to 100ms / 30ms = ~3 instead of 100 for ball 1 so that it stops at approximately 100ms and clear the interval only after the last ball stops

You could also measure the actual time elapsed to compute stop time more precisely.

Finally, if you're animating the balls, you might want to increase the stop time to observe the animation

How to setInterval with different time stop?

1 Answers1