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>

倒数计时器正常工作。但是暂停选项不起作用。那么我该如何更正这个脚本。有人能帮我吗。

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>