javascript - 如何在用户输入后结束 setTimeout

Question

我正在用 JavaScript 开发一个游戏，当时钟指针比平时移动得稍微多一些时，用户需要进行按键输入(按空格键)。目前，我正在使用一个 setTimeout 函数，它让用户在时钟指针走动(旋转 10 度)后有 1 秒的时间进行按键输入。如果用户在时钟指针移动幅度超过平时(15 度)时正确按下空格键，则指示灯会闪烁绿色，否则会闪烁红色。

我遇到的问题是，一旦用户在手移动后的 1 秒内给出输入，指示器将不会闪烁，直到 1 秒过去(即，如果用户在 0.4 秒后给出输入， 0.6以后指示灯才会闪烁)

我知道这是因为指标是在我的 setTimeout 函数中设置的，它只会在 1 秒后执行代码。我曾尝试在 setTimeout 函数之外测试用户输入，但那样用户不会得到 1 秒的时间来做出响应。

我想知道是否有解决这个问题的方法或更好的方法来解决这个问题？

//Get input after clock tick

setTimeout(() => {
    if (irregular_tick && space_pressed) {
        flashScreenGreen();
    }
    if (!(space_pressed) && irregular_tick) {
        flashScreenRed();
    }             
},1000);

感谢您的帮助!

Answer 1

您需要在 setTimeout 回调的外部 保留对计时器的引用，并为按键添加一个带有中断回调的监听器，这将在以下情况下清除超时满足所有条件。

let timer = null;
let space_pressed = false;

function reset() {
  timer = null;
  space_pressed = false;
}

function interruptHandler(e) {
  if (timer !== null) { // only look for spacebar if timer is running
    space_pressed = e.key === ' ';

    if (irregular_tick && space_pressed) {
      // clear timeOut if successful
      clearTimeout(timer);
      reset();

      flashScreenGreen();
    }
  }
}

document.body.addEventListener('keyup', interruptHandler);

timer = setTimeout(() => {
  if (!space_pressed && irregular_tick) {
    flashScreenRed();
  }

  // reset timer at end of callback ready for next run
  reset();
}, 1000);

---

作为旁注，您似乎定义了两个单独的 flashScreenGreen() 和 flashScreenRed() 函数。我猜他们有相似但不相同的逻辑。如果是这种情况，您可能需要考虑定义一个接受颜色作为参数的实用程序 flashScreen() 函数。

function flashScreen(color) {
  // logic utilizing 'color'
}

// usage
flashScreen('green');
flashScreen('#FF0000'); // red as hex