Question

如何设置不同时间停止的间隔？如果没有的话，我使用了此代码，但是它不起作用。我希望3个球在不同的时间停止，第一个是100毫秒，第二个是150毫秒，第三个是200毫秒。

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';
        }

    }

Answer 1

欢迎堆栈溢出！请允许我指出您的语法和逻辑上的一些错误，这些错误可能会指导您修复代码

您的语法不正确。具体来说，您不能在 if 和 else if 块之间

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
}

接下来，您可能需要正确使用 setInterval ：

您要在 RollingBalls 上设置 30ms 的间隔，这意味着每 30ms 都会调用一次。现在，在 RollingBalls 中，对于第1球，您最多可以计数100。因此，第1球将停在 30x100 = 3000ms或3s 而不是 30ms
此外，当第一个球停止时，它将清除间隔，因此所有球都将停止。有效地，所有球将在 3s

为解决这个问题，我建议对所有3个球使用不同的功能并分配各自的间隔。这将使每个函数保持简单，如果您有很多球，可以稍后将其概括；）

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

要清除间隔，可以在每个 RollingBalls 函数内使用 setTimeout ，以在指定的停止时间清除特定球的间隔

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

如果您想继续使用原来的方法，请更改计数逻辑，例如，对第1个球计数到 100ms / 30ms =〜3 而不是 100 使其停止在大约 100ms 并仅在最后一个球停止后清除间隔

您还可以measure the actual time elapsed更精确地计算停止时间。

最后，如果要对球进行动画处理，则可能需要增加停止时间来观看动画

如何设置不同时间间隔的间隔？

1 个答案: