javascript - 倒计时器 : pause button won't pause or change back into play button

Question

我在尝试暂停倒计时器时遇到问题。我试图做到这一点，以便在单击播放按钮后，该按钮变为暂停按钮。但由于某种原因它不会暂停。

我尝试将 id“pButton”更改为“pauseButton”，这是有效的，但似乎我的暂停 onclick 函数不会改回 pButton，有什么帮助吗？(clearinterval(timecounter), timecounter 是全局的变量，以便它可以访问它。)如果您需要查看，这里还有代码笔上的完整代码: http://codepen.io/freefora11/pen/eJdVjZ

//when play button is pressed
    if(document.getElementById("pButton")){
        document.getElementById("pButton").onclick=function(){

            //change the id of the button
            if(document.getElementById("pButton")){
                document.getElementById("pButton").id = "pauseButton";
            }

            //variables
            strMin = document.getElementById("test").innerHTML;
            var res = strMin.split(":",2);
            min = parseInt(res[0]);
            min= min * 60;
            var sec = parseInt(res[1]);
            timeInSeconds = min + sec;



            //set interval to start keeping track each second that has passed
            timeCounter = setInterval(function() {
              timeInSeconds--;

              // If we hit 0 seconds clear the timer
              if (timeInSeconds <= 0) {
                clearInterval(timeCounter);
              }

              // Display the current time
              displayTime();
            }, 1000);
        }
    }

    //when the pause button is clicked
    if(document.getElementById("pauseButton")){
        document.getElementById("pauseButton").onclick=function(){

            //stop the interval
            clearInterval(timeCounter);

            //change the id of the play button from pauseButton to pButton again
            if(document.getElementById("pauseButton")){
                document.getElementById("pauseButton").id ="pButton";
            }

        }
    }

Answer 1

更改 Id 仍会在 DOM 中留下处理程序的残余部分。因此，当您运行 codepen 并单击“开始/暂停”按钮时，您会注意到它为计时器添加了另一个倒计时。这就是每次单击按钮时倒计时都会加快的原因。

您应该在按钮的一个处理程序中处理单击事件的状态。如果状态已暂停，则处理您的暂停逻辑。如果它正在运行，则处理您的运行逻辑。但这一切都可以通过一个事件处理程序完成。在这种情况下，使用 id 或 class 就可以了，但不要即时交换。如果有的话，使用 Id 作为点击处理程序，然后在 dom 中的元素上交换类(或应用数据属性)将更好地表达时钟的当前状态/模式。

尽管如此，还是要处理 JavaScript 中的逻辑。如果您选择这样做(例如在 CSS 中选择)，请使用 dom 状态来应用样式。