倒计时功能不显示 3-2-1 倒计时的最后一个数字

Question

和标题说的差不多。当倒计时开始时，它会变为“3”、“2”，然后执行应该在计时器达到零时启动的功能，跳过数字“1”的显示。实际的计时器输出显示在一个单独的div元素中，您将在下面的代码中看到。我在这里看到了一些关于错误倒计时时钟的答案，但其中很多都使用 jQuery，而我只是使用香草 JavaScript，并且库的使用对我来说仍然有点混乱。var count = 3;function startTimer() {    var timer = setInterval(function() {startTimer(count);}, 1000);     if(count === 0){        clearInterval(timer);        ranCoord(); //function to run when timer hits zero.    } else {        document.getElementById("target").innerText = count;        count--;    }}<div class="start">   <img src="images/start-default.png" onclick="startTimer();" alt="Click Here"/> </div><div id="target"></div>我注意到，如果我var count=3在函数中包含变量startTimer();，倒计时也不起作用，它只会停留在数字 3。有谁知道这是为什么？此外，如果我包含函数var timer = setInterval(function() {startTimer(count);}, 1000); 外部，那么它会在页面加载时自动运行，这不是我想要的。我希望在单击按钮时开始倒计时，并发现当放置在函数内时它可以工作。

Answer 1

如果在 startTimer 函数中声明了 count 变量，则计时器的每次迭代都将覆盖其计数值，因此不会倒计时。

setInterval无限重复其功能，因此只需要在循环外调用一次，而不是setTimeout只运行一次并且每次迭代都需要调用。

另一种使用方法setTimeout是：

function startTimer(count) {

    if (count <= 0) {

        ranCoord();

    } else {

        document.getElementById("target").innerText = count;

        setTimeout(function() { startTimer(--count); }, 1000);

    }

}

此版本还通过将剩余计数作为参数传递来避免使用全局变量。

Answer 2

您无需startTimer致电setInterval

var count = 3;

function startTimer() {

  var timer = setInterval(function() {

    if (count === 0) {

      clearInterval(timer);

      ranCoord(); //function to run when timer hits zero.

    } else {

      document.getElementById("target").innerText = count;

      count--;

    }

  }, 1000);

}

function ranCoord() {

  console.log("Timer hit 0")

}

img {

  height: 100px;

  width: 100px;

  outline: 1px solid blue;

}

<div class="start">

  <img src="images/start-default.png" onclick="startTimer();" />

</div>

<div id="target"></div>

Answer 3

我认为您不需要添加更多代码，您只需要像这样简化它

    var count = 3;

    function startTimer() {

        const timer = setInterval(function () {

            document.getElementById("target").innerText = count;

            count--;

            if (count <= 0) {

                clearInterval(timer);

                ranCoord();

            }

        }, 1000)

    }