倒计时功能不显示 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) {&nbsp; &nbsp; if (count <= 0) {&nbsp; &nbsp; &nbsp; &nbsp; ranCoord();&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("target").innerText = count;&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(function() { startTimer(--count); }, 1000);&nbsp; &nbsp; }}此版本还通过将剩余计数作为参数传递来避免使用全局变量。

Answer 2

您无需startTimer致电setIntervalvar count = 3;function startTimer() {&nbsp; var timer = setInterval(function() {&nbsp; &nbsp; if (count === 0) {&nbsp; &nbsp; &nbsp; clearInterval(timer);&nbsp; &nbsp; &nbsp; ranCoord(); //function to run when timer hits zero.&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; document.getElementById("target").innerText = count;&nbsp; &nbsp; &nbsp; count--;&nbsp; &nbsp; }&nbsp; }, 1000);}function ranCoord() {&nbsp; console.log("Timer hit 0")}img {&nbsp; height: 100px;&nbsp; width: 100px;&nbsp; outline: 1px solid blue;}<div class="start">&nbsp; <img src="images/start-default.png" onclick="startTimer();" /></div><div id="target"></div>

Answer 3

我认为您不需要添加更多代码，您只需要像这样简化它&nbsp; &nbsp; var count = 3;&nbsp; &nbsp; function startTimer() {&nbsp; &nbsp; &nbsp; &nbsp; const timer = setInterval(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("target").innerText = count;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count--;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (count <= 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(timer);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ranCoord();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp; }