在空格鍵和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> 

希望能幫助到你！