javascript - 如果没有发生按键事件，js 按键事件和操作之间的时间间隔

Question

在下面的代码中，<div> 中显示了不同的单词。在按键事件或 1500 毫秒后(如果没有按键按下)。单词出现和按键之间耗时是我的 react 时间，它保存在变量 reac 中.

这一切都运行良好。但现在我想进行两点调整:

1. 如果没有按键， react 时间应等于 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 对于任何类型的敏感计时操作来说都是一个糟糕的选择，因此我们将继续假设这是针对真正准确的计时数据的用例。 t 至关重要。 :)

<小时/>

编辑

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

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);

希望这有帮助。