在空格键和onclick上重置计数器

Question

我正在尝试以10为单位从200倒数到0。

该计时器可以停止，然后应重置为200，但是，我还需要停止的时间值。 倒数计时会用innerHTML填充div #log 。 每当我“停止”的计时器，我取的价值#log并将其放置在#price和我隐藏#log 。 这里的问题是计时器在后台继续运行，而我希望将其重置，以便可以通过单击启动再次启动它。 但是，它只是继续递减计数，只有完成后，我才能再次启动它。

在该示例中，到达0并不需要花费很长时间，但是最后，到达0将花费15-20秒，这太长了等待时间。

简而言之：倒数200-0，但是在单击Start按钮或空格键时，它应该立即停止该函数的运行，以便可以再次启动它。

看到这个笔

如果您对如何完全不同有任何建议，欢迎与大家分享！

的HTML

<button id="btn" class="normal">Start</button>
<div id="log">#</div>
<div id="price"></div>

JS

var log = document.getElementById("log");
var btn = document.getElementById("btn");
var price = document.getElementById("price");
var counting = false;
var btnClassName = btn.getAttribute("class");

function start(count) {
  if (!counting) {
    counting = true;
    log.innerHTML = count;
    var timer = setInterval(function() {
      if (count >= 0) {
        log.innerHTML = count;
        count -= 10;
      }  else {
        clearInterval(timer);
        count = arguments[0];
        counting = false;
        btn.className = "normal";
      }
    }, 150);
  };
};

btn.onclick = function() {
  if (btnClassName == "normal") {
    start(200);
    price.style.display = 'none';
    log.style.display = 'block';
    btn.className = "counting";
    log.innerHTML = "";
  } else {
  }
};

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
      price.innerHTML = log.innerHTML;
      price.style.display = 'block';
      log.style.display = 'none';
    }
}

Answer 1

我“重新编码”您的代码，因为那里存在多个问题。

只需阅读代码，然后告诉我您是否正在寻找或有任何疑问。

 var log = document.getElementById("log"); var btn = document.getElementById("btn"); var price = document.getElementById("price"); var counting = false; var timer; var c = 0; function start(count) { btn.blur(); if (!counting) { c = count; counting = true; log.innerHTML = count; timer = setInterval(tick, 1500); tick(); }; }; function tick() { if (c >= 0) { log.innerHTML = c; c -= 10; } else { clearInterval(timer); c = arguments[0]; counting = false; btn.className = "normal"; } } btn.onclick = function() { resetTimer(); var btnClassName = btn.getAttribute("class"); if (btnClassName == "normal") { price.style.display = 'none'; log.style.display = 'block'; btn.className = "counting"; log.innerHTML = ""; start(200); } else { pause(); } }; document.body.onkeyup = function(e) { if(e.keyCode == 32) { e.preventDefault(); pause(); } } function pause() { resetTimer(); price.innerHTML = log.innerHTML; price.style.display = 'block'; log.style.display = 'none'; btn.className = 'normal'; counting = false; } function resetTimer() { clearInterval(timer); } 

 body { font: 100% "Helvetica Neue", sans-serif; text-align: center; } /*#outer { width: 400px; height: 400px; border-radius: 100%; background: #ced899; margin: auto; } #inner { width: 350px; height: 350px; border-radius: 100%; background: #398dba; margin: auto; }*/ #log, #price { font-size: 500%; font-weight: bold; } 

 <div id="outer"> <div id="inner"> <div id="arrow"> </div> </div> </div> <button id="btn" class="normal">Start</button> <div id="log">#</div> <div id="price"></div> 

Answer 2

尽管您已经得到了答案，但是您可以尝试执行以下操作：

此外，我已经采取自由重新格式化您的代码，并为示范的目的，一直保持延迟 interval为1000

JSFiddle

 function Counter(obj) { var _initialVaue = obj.initialValue || 0; var _interval = null; var status = "Stopped"; var start = function() { this.status = "Started"; if (!_interval) { _interval = setInterval(obj.callback, obj.delay); } } var reset = function() { stop(); start(); } var stop = function() { if (_interval) { this.status = "Stopped"; window.clearInterval(_interval); _interval = null; } } return { start: start, reset: reset, stop: stop, status: status } } function init() { var counterOption = {} var count = 200; counterOption.callback = function() { if (count >= 0) { printLog(count); count -= 10; } else { counter.stop(); } }; counterOption.delay = 1000; counterOption.initialValue = 200 var counter = new Counter(counterOption); function registerEvents() { document.getElementById("btn").onclick = function() { if (counter.status === "Stopped") { count = counterOption.initialValue; counter.start(); printLog("") toggleDivs(counter.status) } }; document.onkeyup = function(e) { if (e.keyCode === 32) { printLog(counterOption.initialValue); counter.stop(); toggleDivs(counter.status) printPrice(count); } } } function printLog(str) { document.getElementById("log").innerHTML = str; } function printPrice(str) { document.getElementById("price").innerHTML = str; } function toggleDivs(status) { document.getElementById("log").className = ""; document.getElementById("price").className = ""; var hideID = (status === "Started") ? "price" : "log"; document.getElementById(hideID).className = "hide"; } registerEvents(); } init(); 

 body { font: 100% "Helvetica Neue", sans-serif; text-align: center; } .hide{ display: none; } #log, #price { font-size: 500%; font-weight: bold; } 

 <div id="outer"> <div id="inner"> <div id="arrow"> </div> </div> </div> <button id="btn" class="normal">Start</button> <div id="log">#</div> <div id="price"></div> 

希望能帮助到你！