ボタンでsetTimeoutを開始/停止し、より多くのクリックでより速くカウントを防止します。

Question

JavaScriptで作業しており、カウントアップするためにsetTimeout関数を使用しています。私は、ボタンの上に

をクリックしたときに、私はより速く行くから私のカウントを防ぐためにどのように停止時に起動するように私のsetTimeout関数を取得するにはどうすればよい。ここに私のコードがある...

<button id="star">Start</button> 
<p id="time">0</p> 

var timeEl = 0; 

function start() { 
    time(); 
} 

function time() { 
    setTimeout(function() { 
     timeEl = timeEl + .1; 
     timeEnd = timeEl.toFixed(1); 
     document.getElementById("time").innerHTML = timeEnd; 
     time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", star, false); 

1. ボタンをクリックする回数は増えます。

私は以下のJSFiddleを含んでいます！ https://jsfiddle.net/pb4759jh68/0618eLoe/

Answer 1

をごclearTimeout()を使用することができ、タイマーを停止するにはそれはsetTimeout()で作成されたタイマーのIDが必要です。 setTimeout()を呼び出すと、タイマーIDがtimeOutに保存され、timeOutの内容がstart()にあることを確認し、タイマーが現在実行中であるかどうかを確認します。タイマーが実行されている場合、timeOutがclearTimeout(timeOut);で使用されます。

var timeEl = 0; 
var timeOut = null; 
function start() 
{ 
    if(timeOut !== null){ 
    clearTimeout(timeOut); 
    timeOut = null; 
    }else{ 
    time(); 
    } 
} 
function time() 
{ 
    timeOut = setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", start, false); 

私はこのコードは問題

JSFiddle

のsetIntervalとてclearIntervalを使用して達成することができる同じをクリア願っています。試してみるJSFiddle

Answer 2

あなたはclearTimeoutと、以前に設定されたタイムアウトをキャンセルすることができます - https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeoutを参照してください。

Answer 3

この JsFiddle

var timeEl = 0,timer; 
function start() 
{ 
    time(); 
} 
function time() 
{ 
document.getElementById("star").disabled=true; 
    timer=setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

function stop(){ 
document.getElementById("star").disabled=false; 
clearTimeout(timer); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", start, false); 
var elstop = document.getElementById("stop"); 
elstop.addEventListener("click", stop, false); 

Answer 4

を試してみてください、私は単純にカウントがすでに実行されている場合を示すブール追加：、

https://jsfiddle.net/0618eLoe/3/

var timeEl = 0; 
var isStarted = false; 
function startStop() 
{ 
    if (!isStarted) { 
    isStarted = true; 
    time(); 
    } else { 
    isStarted = false; 
    } 
} 
function time() 
{ 
    if (!isStarted) return; 

    setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", startStop, false); 

Answer 5

ボタンを押すたびに、タイマーの2番目のコピーが表示され、時間が早くなります。

var el = document.getElementById("star"); 
el.addEventListener("click", start, false); 

私はこのような何かをお勧めします：以下

var timerId = 0; 
var timeEl = 0; 
function start() 
{ 
    time(); 
} 
function time() 
{ 
    timerId = setTimeout(function() 
    { 
    timeEl = timeEl + .1; 
    timeEnd = timeEl.toFixed(1); 
    document.getElementById("time").innerHTML = timeEnd; 
    time(); 
    }, 100); 
} 

var el = document.getElementById("star"); 
el.addEventListener("click", function() { 
    if (timerId !== 0) { 
    clearTimeout(timerID); 
    timerId = 0; 
    } else { 
    start(); 
    } 
}, false); 

Answer 6

var timeEl = 0,g; 
 
function start() 
 
{ 
 
if(g){ 
 
\t clearTimeout(g); 
 
    timeEl = 0; 
 
} 
 
    time(); 
 
} 
 
function time() 
 
{ 
 
    g=setTimeout(function() 
 
    { 
 
    timeEl = timeEl + .1; 
 
    timeEnd = timeEl.toFixed(1); 
 
    document.getElementById("time").innerHTML = timeEnd; 
 
    time(); 
 
    }, 100); 
 
} 
 

 
var el = document.getElementById("star"); 
 
el.addEventListener("click", start, false);

tell me what else would you need. or it implements your specification. here button click will start the timer from 0 again. 

jsfiddle

Answer 7

をs setIntervalとclearInterval

var time = 0.0; 
var view = document.getElementById('time'); 
var running = false; 
var repeat; 

function start(){ 
    if(running){ 
     return; 
    } 
    running = true; 
    repeat = setInterval(increment, 100); 
} 

function stop(){ 
    clearInterval(repeat); 
    running = false; 
} 

function increment(){ 
     time += 0.1; 
     view.innerText = time.toFixed(1); 
} 

デモ用いて溶液imple：

https://jsfiddle.net/m7bmc2uj/