javascript - 了解 JavaScript setTimeout 和 setInterval

Question

我需要一点帮助来理解和学习如何控制这些功能来完成我想让它们完成的事情

所以基本上我来自 Java 背景并通过“Pong 游戏”项目深入研究 JavaScript。我已经设法让游戏运行 setInteval 每 20 毫秒调用我的主游戏循环，所以这一切都很好。然而，我正在尝试实现一种“开始倒计时”类型的功能，该功能基本上使隐藏的 div 在回合之间可见，将其设置为 innerHTML = "3"//then "2"then "1"然后“开始!”。

我最初尝试通过将 setTimeout 放入 4 次迭代 for 循环 (3,2,1,go) 中来实现此目的，但始终只显示最后一次迭代。我试着修补了一下，但我一直觉得我缺少关于控制流程的基本概念。

我将从我的程序中发布相关代码，我的问题基本上是我为什么写错了我的代码，以及我需要了解 setTimeout 和 setInterval 的哪些信息才能修复它以我想要的方式执行。我对学习如何理解和掌握这些调用很感兴趣，所以尽管代码示例对帮助我理解非常棒并且显然不是不受欢迎的，但我只是想明确表示，我找你不是为了“修复我的代码”。另外，请不要使用 jQuery。

整个程序将是一大堆代码，所以我会尽量保持它的精简和相关性:

//this function is called from the html via onclick="initGame();"
function initGame(){

    usrScore = 0;
    compScore = 0;
    isInPlay = true;

    //in code not shown here, these objects all have tracking variables
    //(xPos, yPos, upperBound, etc) to update the CSS
    board = new Board("board");
    ball = new Ball("ball");
    lPaddle = new LPaddle("lPaddle");
    rPaddle = new RPaddle("rPaddle");

    renderRate = setInterval(function(){play();}, 20);

}

.

function initNewRound(){

    /*
     * a bunch of code to reset the pieces and their tracking variables(xPos, etc)    
     */

    //make my hidden div pop into visibility to display countdown (in center of board)
    count = document.getElementById("countdown");
    count.style.visibility = "visible"; 


     //*****!!!! Here's my issue !!!!*****//

    //somehow i ends up as -1 and that's what is displayed on screen
    //nothing else gets displayed except -1
    for(var i = 3; i >= 0; i--){
        setInterval(function(){transition(i);}, 1000);
    }
}

.

//takes initNewRound() for-loop var i and is intended to display 3, 2, 1, GO!
function transition(i){
    count.innerHTML = (i === 0) ? "Go" : i;
}

.

//and lastly my main game loop "play()" just for context
function play(){

    if(usrScore < 5 && compScore < 5){

        isInPlay = true;
        checkCollision();
        moveBall();
        moveRPaddle();

        if(goalScored()){
            isInPlay = false;
            initNewRound();
        }
    }

} 

非常感谢您的建议，我是 JavaScript 的新手，所以非常感谢。

Answer 1

扩展 cookie monster 的评论，当您在循环中使用 setInterval 时，您正在排队将在基本代码流完成后运行的方法执行。您可以将单个执行排队并使用变量闭包或全局计数器来跟踪当前计数，而不是将多个 setInterval 执行排队。在下面的例子中，我使用了一个全局变量:

var i = 3 // global counter;
var counterInterval = null; // this will be the id of the interval so we can stop it

function initNewRound() {
    // do reset stuff

    counterInterval = setInterval(function () { transition() }, 1000); // set interval returns a ID number
}

// we don't need to worry about passing i, because it is global
function transition() {
    if (i > 0) {
        count.innerHTML = i;
    }
    else if (i === 0) {
        count.innerHTML = "Go!";
    }
    else {
        i = 4; // set it to 4, so we can do i-- as one line
        clearInterval(counterInterval); // this stops execution of the interval; we have to specify the id, so you don't kill the main game loop
    }

    i--;
}

这是一个Fiddle Demo