如何同步两个javascript函数？

Question

我正在尝试制作一个小游戏项目，您必须在一小段时间内快速点击。

使用

setTimeOut()

控制时间，也使用

setInterval()

显示剩余时间。

然而，在我的一生中，我似乎无法同步两个计时器。计时器显示似乎落后了一秒。

我已经尝试将

setInterval()

嵌套在

setTimeout()

中，但它只是运行

setTimeout()

，一旦完成，它就会启动计时器。

这些是我使用的函数和时间变量：

    let time = 10000;
    let timer = time /1000;
    setTimeout(() => {
                gameButton.style.display = "none";
                score = 0;
                power = 0;
            }, time);

    const countdown = setInterval(() => {
                textTimer.textContent = "You have " + timer + " seconds!";
                timer--;
                if (timer < 0) {
                    clearInterval(countdown);
                    textTimer.textContent = "";
                }
            }, 1000); // Update every 1 second (1000 milliseconds)

Answer 1

好的。因此，您在 10 秒后设置超时回调，并开始一个从 10 到 0 倒数的间隔。现在，您的间隔在 1 秒延迟后开始，并从 10 开始。处于该状态时，距离结束还有 9 秒，尽管它声称只有 10 秒...

因此，每一秒，它都声称还有 1 秒。因此，解决方案是创建一个倒计时函数，将其传入

setInterval

并单独调用它，这样它将在正确的时刻从正确的计数开始，这将解决差异。

    let gameButton = document.getElementById("game-button");
    let textTimer = document.getElementById("text-timer");
    let time = 10000;
    let timer = time /1000;
    let score = 0;
    let power = 0;
    setTimeout(() => {
                gameButton.style.display = "none";
                score = 0;
                power = 0;
            }, time);
    function finalCountDown() {
                textTimer.textContent = "You have " + timer + " seconds!";
                timer--;
                if (timer < 0) {
                    clearInterval(countdown);
                    textTimer.textContent = "";
                }
    }
            const countdown = setInterval(finalCountDown, 1000); // Update every 1 second (1000 milliseconds)
            finalCountDown();

<span id="text-timer"></span>
<input id="game-button" value="click me" type="button">