Question

我是编程和编码的新手，我需要一个小项目的帮助。我需要在激活函数之前设置一个小的时间延迟。我正在使用HTML5画布并尝试重新创建pong。无论如何，想要在调用ballReset()函数之前稍微延迟一下。此外，这不是整个脚本，它只是调用ballReset()函数的部分。

function moveEverything() {
    computerMovement();

    ballX = ballX + ballSpeedX;
    ballY = ballY + ballSpeedY;

    if(ballX < 0) {
        if(ballY > paddle1Y &&
            ballY < paddle1Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();
            player2Score++;
        }
    }

    if(ballX > canvas.width) {
        if(ballY > paddle2Y &&
            ballY < paddle2Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;
        } else {
            ballReset();    
            player1Score++;
        }
    }
    if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }
    if(ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
}

Answer 1

javascript setTimeout和setInterval（other）

中有两种（主要使用的）计时器功能

这两种方法都有相同的签名。它们将回调函数和延迟时间作为参数。

setTimeout仅在延迟后执行一次，而setInterval在每个延迟秒后继续调用回调函数。

这两个方法都返回一个整数标识符，可用于在计时器到期之前清除它们。

clearTimeout和clearInterval这两种方法都采用从上述函数setTimeout和setInterval

返回的整数标识符

示例：

<强> setTimeout

alert("before setTimeout"); setTimeout(function(){ alert("I am setTimeout"); },1000); //delay is in milliseconds alert("after setTimeout");

如果您运行上述代码，您会看到它提醒 before setTimeout ，然后 after setTimeout ，最后它会提醒 {{在1秒（1000毫秒）后<}>

您可以从示例中注意到I am setTimeout是异步的，这意味着在进入下一个语句之前它不会等待计时器过去，即setTimeout(...)

示例：

<强> setInterval

alert("after setTimeout");

如果您运行上述代码，您会看到它提醒 alert("before setInterval"); //called first var tid = setInterval(function(){ //called 5 times each time after one second //before getting cleared by below timeout. alert("I am setInterval"); },1000); //delay is in milliseconds alert("after setInterval"); //called second setTimeout(function(){ clearInterval(tid); //clear above interval after 5 seconds },5000); ，然后 before setInterval ，最后它会提醒 {{ 1}} 1秒后（1000毫秒）5次因为setTimeout在5秒后清除计时器，否则每1秒就会发出警报 after setInterval 无限。

浏览器内部如何做到这一点？

我将简要解释一下。

要了解您必须了解javascript中的事件队列。在浏览器中实现了一个事件队列。每当在js中触发事件时，所有这些事件（如点击等等）都会添加到此队列中。当您的浏览器无法执行任何操作时，它会从队列中获取事件并逐个执行。

现在，当您调用I am setInterval或I am setInterval时，您的回调会在浏览器中注册到计时器，并在给定时间到期后被添加到事件队列中，最终javascript从队列中获取该事件并执行它。

这种情况发生了，因为javascript引擎是单线程的，它们一次只能执行一件事。因此，他们无法执行其他JavaScript并跟踪您的计时器。这就是为什么这些计时器在浏览器中注册（浏览器不是单线程），它可以跟踪计时器并在计时器到期后在队列中添加一个事件。

同样发生setTimeout只有在这种情况下，事件会在指定的时间间隔后一次又一次地添加到队列中，直到它被清除或浏览器页面刷新为止。


注意

传递给这些函数的延迟参数是最小延迟   时间来执行回调。这是因为计时器到期后   浏览器将事件添加到要由队列执行的队列中   javascript引擎，但回调的执行取决于你的   事件在队列中的位置以及引擎是单线程的   将逐个执行队列中的所有事件。

因此，当您的其他代码阻塞线程并且没有时间处理队列中的内容时，您的回调有时可能会超过指定的延迟时间。

正如我提到的，javascript是单线程。所以，如果你长时间阻止线程。

喜欢这段代码

setInterval

您的用户可能会收到一条消息，指出页面无响应。

Answer 2

你要找的是setTimeout fn，并将fn ballReset（）作为回调传递！

例如，延迟了3000毫秒，

setTimeout(function () {
  ballReset()
}.bind(this), 3000)

您可以在以下文档页面https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

中找到有关setTimeout的更多信息

如何在JavaScript中为函数添加时间延迟？

2 个答案: