Javascript adding a pause option to countdown time

问题:

I have a javascript function to countdown a timer. So I want to add pause option to this function. I tried this way,

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>

The countdown timer working correctly. But the pause option not working. So how can I correct this script. Can someone help me.

回答1:

Although your code is working, I would like to note a couple of things: adding your pause handler inside your interval isn't a good idea, you will be adding a pause handler every interval, so in the end you are just stacking up the amount of functions to handle when clicking. I have made your button toggle and separated out the event listener into a handler function so you can attach it to any button. These changes will keep your code working fluently while also making it easier to understand:

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>

Update Adding a cancel button:

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>