JavaScript向倒计时器添加暂停选项无法正常工作

Question

我有一个倒计时的JavaScript函数。所以我想在这个函数中添加暂停选项。我尝试了以下方法：

function countdownTimeStart() {

 var el = document.getElementById('demo');
 var pause= document.getElementById('pause');

 var time = [10,10,10];

 var x = setInterval(function () {

  var hours = time[0];
  var minutes = time[1];
  var seconds = time[2]--;

  if (time[2] == -1) {
      time[1]--;
      time[2] = 59 }

  function pauseTimer() {
    savedTime = time;
    clearInterval(x);
  }
  pause.addEventListener( 'click', pauseTimer);

  if( seconds == 0 && minutes == 0 && hours == 0 ){
    clearInterval(x);
    el.innerHTML = "00:00:00";
  } else if (seconds < 10) {
    el.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
  } else {
    el.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
  }

}, 1000);

}

countdownTimeStart();

<button id="pause" class="pause">Pause</button>
<div id="demo"></div>

倒计时器运作正常，但暂停选项不起作用。那么我该如何纠正这个脚本呢？有人可以帮忙吗？

- Chathurika

---

addEventCancel.removeEventListener('click', pauseTimer); - CertainPerformance

我已将您的代码转换为可工作的代码片段（使用一个预填值的数组替换您从输入中读取的时间，但本质上是相同的），看起来它能够正常工作。 - somethinghere

是的，现在它可以工作了！那么当暂停按钮再次被点击时，我该如何恢复它呢？您能否把这个作为答案添加进去，我会将其标记为正确答案。谢谢。 - Chathurika

Answer 1

虽然你的代码可以运行，但我想指出几点问题：将暂停处理程序添加到interval中不是一个好主意，因为你将在每个间隔内添加一个暂停处理程序，最终只是堆积了点击时要处理的函数数量。我已经将你的按钮切换并将事件侦听器分离成一个处理程序函数，这样你就可以将其附加到任何按钮上。这些更改将使你的代码顺畅运行，并使它更易于理解：

function initCountdown() {
  
  function event_click( event ){
    
    // If our interval is null, we need to start the counter
    // And also change the innerText so its obvious what the button will do next
    
    if( interval === null ){
      
      start();
      event.target.innerText = 'pause';
     
    } else {
      
      pause();
      event.target.innerText = 'start';
      
    }
    
  }
  
  function start(){
    
    // First use pause() to be sure all intervals are cleared
    // it prevents them from doubling up
    
    pause();
    interval = setInterval( count, 1000 );
    
  }
  function pause() {
  
    clearInterval( interval );
    interval = null;
    
  }
  function count(){
    
    // By doing this before declaring your variables
    // you make it so the variables actually hold the new calculated values.
    
    time[2]--;
    
    if( time[2] == -1 ){
    
      time[1]--;
      time[2] = 59;
      
    }
    
    // Lets use some cool new syntax here to reduce the amount of code needed
    // this will destructure an array assigning their indexed values to the index of the variable
    
    var [ hours, minutes, seconds ] = time;

    if( seconds == 0 && minutes == 0 && hours == 0 ){
    
      clearInterval( interval );
      
    }
    
    // We always want to print something, and if the values are 0
    // the output is still the same, so lets seperate that.
    
    if (seconds < 10) {
    
      outputElement.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
      
    } else {
    
      outputElement.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
      
    }
    
  }
  
  // Lets also clearly name our things.
  
  var outputElement = document.getElementById('demo');
  var toggleElement = document.getElementById('toggle');
  var interval = null;
  var time = [10,10,10];

  // Add event listener once
  
  toggleElement.addEventListener( 'click', event_click );
  toggleElement.click();
  
}

initCountdown();

<button id="toggle">start</button>
<div id="demo"></div>

更新：添加取消按钮：

function initCountdown() {
  
  function event_click_cancel( event ){
    
    pause();
    time = [ 0, 0, 0 ];
    print();
    
  }
  function event_click_startpause( event ){
    
    // If our interval is null, we need to start the counter
    // And also change the innerText so its obvious what the button will do next
    
    if( interval === null ){
      
      start();
      event.target.innerText = 'pause';
     
    } else {
      
      pause();
      event.target.innerText = 'start';
      
    }
    
  }
  
  function start(){
    
    // First use pause() to be sure all intervals are cleared
    // it prevents them from doubling up
    
    pause();
    interval = setInterval( count, 1000 );
    
  }
  function pause() {
  
    clearInterval( interval );
    interval = null;
    
  }
  function print(){
    
    // I have separated out the print function as we want to use it
    // in the count and the cancel function
    
    var [ hours, minutes, seconds ] = time;

    if( seconds == 0 && minutes == 0 && hours == 0 ){
    
      clearInterval( interval );
      
    }
    
    if (seconds < 10) {
    
      outputElement.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
      
    } else {
    
      outputElement.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
      
    }
    
  }
  function count(){
    
    // By doing this before declaring your variables
    // you make it so the variables actually hold the new calculated values.
    
    time[2]--;
    
    if( time[2] == -1 ){
    
      time[1]--;
      time[2] = 59;
      
    }
    
    print();
    
  }
  
  // Lets also clearly name our things.
  
  var outputElement = document.getElementById('demo');
  var toggleElement = document.getElementById('toggle');
  var cancelElement = document.getElementById('cancel');
  var interval = null;
  var time = [10,10,10];

  // Add event listener once
  
  toggleElement.addEventListener( 'click', event_click_startpause );
  toggleElement.click();
  
  cancelElement.addEventListener( 'click', event_click_cancel );
  
}

initCountdown();

<button id="toggle">start</button>
<button id="cancel">cancel</button>
<div id="demo"></div>

- somethinghere

---

根据我的需求，当再次点击暂停按钮时，我想要恢复计数。这不可能吗？ - Chathurika

@Chathurika 是的，让我做一个小调整！ - somethinghere

@Chathurika，我已经修改了我的解决方案，添加了一个切换按钮，再次分离出来，这使得您的代码更具可重用性、易读性和可维护性。 祝你好运！ - somethinghere

非常感谢您的帮助和出色的工作。 - Chathurika

@Chathurika 我已经更新了我的帖子，并提供了一个取消的示例。这使我分离出了 print 函数，因为我们现在想要在计时器之外的其他地方使用它。 - somethinghere