我的 Javascript CountDown() 不工作

Question

我的倒计时不工作...它只显示 10..我正在尝试运行单击倒数计时器，在 H5 标题下，它将替换按计时器打开、按保留清除和透明背景由橙色。当小于 1 时，它会再次更改回默认值。 abc() 是 onClick 的函数...

function abc() {
  if (firstTimer = "Open") {

    firstHeading.innerHTML = "Reserved";
    firstT.style.backgroundColor = "#D27900";

    function countDown(secs, elem) {
      var element = document.getElementById(elem);
      element.innerHTML = secs;
      if (secs < 1) {
        clearTimeout(timer);
        element.innerHTML = "Open";
        firstHeading.innerHTML = "Clear";
      }
      secs--;
      var timer = setTimeout('countDown(' + secs + ',"' + elem + '")', 10000);
    }
    countDown(10, "firstTblImageTimer");
  }
}

Answer 1

我认为您对 setTimeout 的工作方式有点困惑，因为您在 countdown 函数本身内部为 countdown 函数设置了超时，您将不得不等待每次执行 countdown 函数需要 10 秒。如果您愿意打印倒计时，我建议您改用 setInterval。这是您的解决方案的样板

var secs = 10;
var countdown = function() {
    
 if(secs < 1) {
  clearInterval(myVar);
                // Do something while still counting down
  console.log("Time out!");
 } else {
               // Do something when you reach to zero
  console.log(secs);
  secs--;
 }
}
var myVar = setInterval(countdown, 1000);

我建议您查看 Window clearInterval() Method and Window setTimeout() Method W3School 页面，以便了解它们的工作原理以及彼此之间的差异，并判断哪种方法更适合您的问题。

Answer 2

您使用了错误的方法来解决这个计时器问题，您希望计时器每秒更新一次，因此您的计时器应该每秒调用一次。为了清楚起见，尽量让每个函数都只有一个责任，例如下面的代码：

function countDown( secs , elem ) {
    var updateElem =  function(){
        if(secs <= 0){
            elem.innerHTML = "Open";
            firstHeading.innerHTML = "Clear";
        }
        else{
            elem.innerHTML = secs;
        }
    }

    var checkTimeout = function(){
        if(secs <= 0){
        clearInterval(timer);
        }
        else{
            updateElem();
            secs--;
        }
    }

    var timer = setInterval( checkTimeout,1000);
}

请注意，我没有在我的函数内查找元素，但我会在外部找到它，我可以将此函数与其他元素一起重用，所以在我的主函数中我会有类似这个：

var element = document.getElementById("firstTblImageTimer");
countDown(10 , element);

我的 Javascript CountDown() 不工作

My Javascript CountDown() is not working

javascript

countdowntimer