如果未发生keypress事件，则js按键事件和操作之间的间隔

Question

在我的下面的代码中，在按键事件的<div>中显示不同的单词，如果没有按下任何键，则在1500ms后显示。单词出现和按键之间经过的时间是我的反应时间，它保存在变量reac中。

一切正常。但现在我想进行两项调整：

1. 如果没有按键，反应时间应等于1500。就像现在一样，时间一直持续到按下一个键。

2. 我希望旧单词的消失和新单词的出现之间的间隔为500毫秒。

我认为它是setTimeout或setInterval，但我尝试过它并没有完美地完成。

这是我的脚本（我将其缩短以使其更具可读性，因此我可能忘记在下面的示例中关闭括号 - 但希望不是这样）：

$(document).ready(function(){
  var upda = function() {
    (show random word in div)
  };
  t1 = (new Date()).getTime();
  timer = setInterval(upda, 1500);
  $(document).keypress(function(e){
    clearInterval(timer);
    var t2 = (new Date()).getTime();
    reac = t2 - t1;
    t1 = t2;
    if (e.keyCode == 97) {
      (show another random word in div)
    };
    timer = setInterval(upda, 1500);
  });
}); 

Answer 1

您真的不想要interval，而是想要timeout

一般的想法是你设置1500ms的到期时间;如果用户在该输入到期时未提供适当的输入，则超时到期并触发超时功能，设置默认的reac值并重新启动计时器。

然后，按键处理程序会使到期时间短路并记录“实际”reac。

作为旁注，您可能会发现基于浏览器的JavaScript对于任何类型的敏感定时操作都是一个糟糕的选择，因此我们将继续并假设这是用于真正准确的定时数据的用例。至关重要。 ：）

---

修改

作为练习，我重新编写代码以使用计时器而不是间隔，并将任务分成单独的函数。这只是一个例子;其他开发者可能采取不同的方法例如，在一个较大的项目中，这几乎肯定会被封装在一个对象库中，您可以在应用程序周围重用它。

var expectedInput, inputTimer, reac, startTime;

var $document = $(document);
var defaultReacTime = 1500;
var delayBetweenInputs = 500;
var timerInterval = 1500;

var showWordAndWaitForInput = function () {
    startTime = (new Date()).getTime();
    $document.on('keypress', keypressHandler);
    expectedInput = 97;
    console.log('Waiting for <expectedInput> at <startTime> ::', expectedInput, startTime);
    inputTimer = setTimeout(timerExpires, timerInterval);
};

var stopWaitingForInput = function () {
    clearTimeout(inputTimer);
    $document.off('keypress', keypressHandler);
};

var recordReacAndResetTimer = function (reactionTime) {
    reac = reactionTime;
    console.log('reac ::', reac);
    setTimeout(showWordAndWaitForInput, delayBetweenInputs);
};

var timerExpires = function () {
    stopWaitingForInput();
    console.log('timer expired');
    recordReacAndResetTimer(defaultReacTime);
};

var isInputValid = function (e) {
    return e.keyCode === expectedInput;
};

var keypressHandler = function (e) {
    console.log('input received ::', e.keyCode);
    if (isInputValid(e)) {
        console.log('input is valid, ask for new input');
        stopWaitingForInput();
        var endTime = (new Date()).getTime();
        recordReacAndResetTimer(endTime - startTime);
    } else {
        console.log('input is invalid, keep waiting');
    }
};

setTimeout(showWordAndWaitForInput, delayBetweenInputs);

希望这有帮助。