如何在 keydown 上启动计时器并在 keyup 上停止？答案

【问题标题】：How can I start a timer on keydown and stop on keyup?如何在 keydown 上启动计时器并在 keyup 上停止？
【发布时间】：2019-06-01 17:19:48
【问题描述】：

我希望能够同时按空格键和左箭头键，并让计时器启动十秒钟。如果用户停止按键，那么计时器也应该停止并且结果应该被取消。我已经尝试过使用 clearInterval() 方法。

function startTimer(duration, display) {
  var timer = duration;
  var minutes, seconds;
  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) {
      window.open('1.html', '_self')
    }
  }, 1000);
}

var start = timeFunction = function() {
  var fiveMinutes = 1 * 10;
  var display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

var timesdown = 0;

document.addEventListener('keypress', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    if (timesdown == 0) {
      start();
      timesdown = 1;
    }
  }
});

document.addEventListener('keyup', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    timesdown = 0
    clearInterval(startTimer);
  }
});

&lt;div id="time"&gt;&lt;/div&gt;

当我按下按键时，计时器继续尝试重新启动，但当我抬起计时器时，计时器继续计数。

【问题讨论】：

标签： javascript html timer

【解决方案1】：

clearInterval() 方法清除使用setInterval() 方法设置的计时器。您将需要 setInterval 的引用来清除间隔。我将 setInterval 分配给一个变量，然后使用该变量清除 Interval。

var timeInterval;

function startTimer(duration, display) {
  var timer = duration;
  var minutes, seconds;
  timeInterval = 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) {
      window.open('1.html', '_self')
    }
  }, 1000);
}

var start = timeFunction = function() {
  var fiveMinutes = 1 * 10;
  var display = document.querySelector('#time');
  startTimer(fiveMinutes, display);
};

var timesdown = 0;

document.addEventListener('keypress', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    if (timesdown == 0) {
      start();
      timesdown = 1;
    }
  }
});

document.addEventListener('keyup', function(event) {
  if (event.code == 'Space' && 'LeftArrow') {
    timesdown = 0
    clearInterval(timeInterval);
  }
});

&lt;div id="time"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

您的代码有几个问题。首先，您使用的是keypress 而不是keydown，keypress 不会检测到箭头键。

您也有event.code 错误。这是ArrowLeft，不是LeftArrow。

事件也一次只处理一个。 event.code 不能同时是 'Space' 和 'LeftArrow'。 event.code 是一个变量！

由于一次只处理一个事件，因此您需要额外的逻辑来捕获该状态。

下面的代码是一个工作示例，纠正了上述所有问题。

var intervalID = false;
var spaceDown = false;
var arrowDown = false;
var spaceUp = false;
var arrowUp = false;

function startTimer(duration, display) {
  var timer = duration,
    minutes, seconds;
          
  intervalID = 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) {
      console.log("window.open('1.html', '_self')");
    }
  }, 1000);
}


var start = timeFunction = function() {
  var fiveMinutes = 1 * 10,
    display = document.querySelector('#time');
    
  startTimer(fiveMinutes, display);
};

var timesdown = 0

document.addEventListener('keydown', function(event) {
  
  if (event.code == 'Space') {
    spaceDown = true;
    spaceUp = false;
  }

  if (event.code == 'ArrowLeft') {
    arrowDown = true;
    arrowUp = false;
  }

  if (spaceDown && arrowDown) {
    if (timesdown == 0) {
      start();
      timesdown = 1;
    }
  }
});

document.addEventListener('keyup', function(event) {

  if (event.code == 'Space') {
    spaceDown = false;
    spaceUp = true;
  }

  if (event.code == 'ArrowLeft') {
    arrowDown = false;
    arrowUp = true;
  }

  if (spaceUp && arrowUp) {
    timesdown = 0;
    clearInterval(intervalID);
  }
});

<html>

<body>
  <div id="time"></div>
</body>

</html>

【讨论】：