javascript - 弹出计时器重置问题

Question

这是我第一次使用 JavaScript，所以我确信这是一个简单的问题，但我无法弄清楚。基本上，我正在创建一个游戏，我需要添加一个功能，以便如果玩家 20 秒没有移动，他们会收到提醒。

我已经做到了，提醒会在玩家最后一次点击后 20 秒弹出，但它似乎一直弹出，无论他们是否在 20 秒内移动。

这是我的代码:

function UpdateMoveCount() {
  var timer = setInterval(setReminderTimer, 1000);
  var moveReminder = 0;

  function setReminderTimer() {
    if(moveReminder == 20) {
      document.getElementById("move").style.visibility = "visible";  
      clearInterval(timer);
    } else {
      moveReminder++;
    }
  }
}

UpdateMoveCount() 每次玩家点击时都会被调用。

大家有什么想法吗？

Answer 1

var timer = null;
function UpdateMoveCount() {
  if(timer) clearInterval(timer);
  timer = setInterval(setReminderTimer, 1000);
  var moveReminder = 0;

  function setReminderTimer() {
    if(moveReminder == 20) {
      document.getElementById("move").style.visibility = "visible";  
      clearInterval(timer);
    } else {
      moveReminder++;
    }
  }
}