在javascript中添加/减少倒计时的时间

Question

I'm trying to figure out javascript ... Currently, I am using a countdown timer. I'd like to add/subtract 1 minute when the left or right key is pressed.

I tried the following:

  $(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
          current = parseInt($('#time2').textContent);
          newtime = current + 60;
          countdown_start(newtime)
        break;

        case 39: // right
          alert('right');
        break;

        default: return;
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
  });

But it has some really funky reaction ... and starts counting down twice...one with a NaNaNaNa...

Any help would be appreciated. Thanks!

.background-countdown
  #start-game
    = submit_tag 'Play', id: "start"
  #time2
    60:00
  .test
    asd
  -##start-time
  -#  =text_field_tag 'start-time-input', "60:00", id: "start-time-input"

  #hint-text.white-text

:javascript

  function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    var countdown = setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
          $('#start').show()
          $('#start-time').show()
          clearInterval(countdown)
        }
    }, 1000);
  }
  function countdown_start(sixtyMinutes = 3600) {
    $(document).ready(function () {
      display = document.querySelector('#time2');
      startTimer(sixtyMinutes, display);
    });
  }

  $('#start').click(function() {
    countdown_start()
    $('#start').hide()
    event.preventDefault();
  });

  function get_text(){
    var feedback = $.ajax({
      type: "POST",
      url: "/jquery/update_text",
      async: false
    }).complete(function(){
      setTimeout(function(){get_text();}, 1000);
    }).responseText;
  }

  $(function(){
    get_text();
  });

Answer 1

The problem here might be, that you are using clearInterval right, but you have not correctly saved the returned ID value of the setIntervall method.

Please have a look at the w3schools.com page: http://www.w3schools.com/jsref/met_win_clearinterval.asp

They write in a note under the definition:

Note: To be able to use the clearInterval() method, you must use a global variable when creating the interval method

You save your ID locally so maybe you shouldn't do that. Instead use a global variable, which just means that you declare it outside the functions section and use that reference over and over again, BUT what you also want to change is your order. First you are setting an interval and later in the startMethod-function you clear that same interval. I think if you change the order and make the variable global, it should work.