javascript - 用户输入递减计时器

Question

当用户在输入中输入内容时，我试图设置一个递减计时器。但是，我正在努力让它正常工作，当用户写一些新东西时它会重新启动。

我以为 .one 会处理这个，但显然不会。

function myTimer() {
  var counter = 15;
  var x = window.setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("timer");
      span.innerHTML = counter;
    }
    if (counter === 0) {
      span.innerHTML = "OUT OF TIME";
      window.clearInterval(x);
    }
  }, 1000);
}

$("#wrapper input").one("change paste keyup", myTimer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="timer">15</span><br>
<div id="wrapper">
  <input class="something" type="text"><br>
  <input class="somethingelse" type="text">
</div>

jsFiddle

Answer 1

移动计数器并测试 tId:

var counter = 15, x, span = document.getElementById("timer");

function myTimer() {
  if (!x) x = window.setInterval(function() {
    if (counter === 0) window.clearInterval(x);
    counter--;
    span.innerHTML = counter >= 0 ? counter : "OUT OF TIME"
  }, 1000);
}

$("#wrapper input").one("change paste keyup", myTimer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="timer">15</span><br>
<div id="wrapper">
  <input class="something" type="text"><br>
  <input class="somethingelse" type="text">
</div>