Javascript StopWatch誤ったリセット値

Question

私は単純なバニラJSストップウォッチを作成しようとしています。私のリセットボタンをクリックすると動作するように管理されていますが、値はinnerHTMLの変更を返しますが、00：00：1ではなく00:00:00の値を返す前に、すばやく点滅します。私はそれを正しくリセットする前に2回クリックする必要があります。しかし、タイマーを一時停止してからリセットすると、完全に機能します。私のコードの欠陥はどこにありますか？

コード：

var status = 0; 
 
var time = 0; 
 

 
document.getElementById('start').addEventListener('click', start); 
 
document.getElementById('pause').addEventListener('click', pause); 
 
document.getElementById('reset').addEventListener('click', reset); 
 

 

 
function start() { 
 

 
    status = 1; 
 
    document.getElementById('start').disabled = true; 
 
    timer(); 
 

 

 
} 
 

 
function pause() { 
 
    status = 0; 
 
    document.getElementById('start').disabled = false; 
 
} 
 

 
function reset() { 
 

 
    time = 0; 
 
    status = 0; 
 

 
    document.getElementById('label').innerHTML = '00:00:00'; 
 
    document.getElementById('start').disabled = false; 
 
} 
 

 
function timer() { 
 
    if (status == 1) { 
 
    setTimeout(function() { 
 
     time++; 
 
     var min = Math.floor(time/10/60); 
 
     var sec = Math.floor(time/10 % 60); 
 
     var mill = time % 10; 
 

 
     if (min < 10) { 
 
     min = '0' + min; 
 
     } 
 

 
     if (sec >= 60) { 
 
     sec = sec % 60; 
 
     } 
 

 
     if (sec < 10) { 
 
     sec = '0' + sec; 
 
     } 
 

 
     document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill; 
 
     timer(); 
 
    }, 100); 
 
    } 
 
}

<div id="wrapper"> 
 
    <h1 id="label">00:00:00</h1> 
 
    <button id="start">Start</button> 
 
    <button id="pause">Pause</button> 
 
    <button id="reset">Reset</button> 
 
</div>

Answer 1

それは各100msを実行するようにスケジュールされますので、あなたは（100ms後）にリセット]をクリックした後、それは一度だけ実行されます、なぜならsetTimeoutのです。リセット後に実行されているから、それを防ぐために、あなたは変数にタイムアウトを保存し、clearTimeoutを使用して、それを止めることができます。

var status = 0; 
 
var time = 0; 
 
var t; // the timeout 
 

 
document.getElementById('start').addEventListener('click', start); 
 
document.getElementById('pause').addEventListener('click', pause); 
 
document.getElementById('reset').addEventListener('click', reset); 
 

 

 
function start() { 
 

 
    status = 1; 
 
    document.getElementById('start').disabled = true; 
 
    timer(); 
 

 

 
} 
 

 
function pause() { 
 
    status = 0; 
 
    document.getElementById('start').disabled = false; 
 
} 
 

 
function reset() { 
 

 
    time = 0; 
 
    status = 0; 
 
    clearTimeout(t); // stop the timeout 
 
    document.getElementById('label').innerHTML = '00:00:00'; 
 
    document.getElementById('start').disabled = false; 
 
} 
 

 
function timer() { 
 
    if (status == 1) { 
 
    t = setTimeout(function() { // start the timeout 
 
     time++; 
 
     var min = Math.floor(time/10/60); 
 
     var sec = Math.floor(time/10 % 60); 
 
     var mill = time % 10; 
 

 
     if (min < 10) { 
 
     min = '0' + min; 
 
     } 
 

 
     if (sec >= 60) { 
 
     sec = sec % 60; 
 
     } 
 

 
     if (sec < 10) { 
 
     sec = '0' + sec; 
 
     } 
 

 
     document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill; 
 
     timer(); 
 
    }, 100); 
 
    } 
 
}

<div id="wrapper"> 
 
    <h1 id="label">00:00:00</h1> 
 
    <button id="start">Start</button> 
 
    <button id="pause">Pause</button> 
 
    <button id="reset">Reset</button> 
 
</div>

Answer 2

理由は、私は若干の待ち時間とあなたがそこにあると信じていることです開始時に実行されるタイムアウトを実際にクリアしていません。タイムアウトIDを追跡し、必要に応じて適切にクリアすることをお勧めします。

var status = 0; 
 
var time = 0; 
 
var timeoutId; 
 

 
document.getElementById('start').addEventListener('click', start); 
 
document.getElementById('pause').addEventListener('click', pause); 
 
document.getElementById('reset').addEventListener('click', reset); 
 

 

 
function start() { 
 

 
    status = 1; 
 
    document.getElementById('start').disabled = true; 
 
    timer(); 
 

 

 
} 
 

 
function pause() { 
 
    status = 0; 
 
    document.getElementById('start').disabled = false; 
 
} 
 

 
function reset() { 
 

 
    time = 0; 
 
    status = 0; 
 
    clearTimeout(timeoutId); 
 

 
    document.getElementById('label').innerHTML = '00:00:00'; 
 
    document.getElementById('start').disabled = false; 
 
} 
 

 
function timer() { 
 
    if (status == 1) { 
 
    timeoutId = setTimeout(function() { 
 
     time++; 
 
     var min = Math.floor(time/10/60); 
 
     var sec = Math.floor(time/10 % 60); 
 
     var mill = time % 10; 
 

 
     if (min < 10) { 
 
     min = '0' + min; 
 
     } 
 

 
     if (sec >= 60) { 
 
     sec = sec % 60; 
 
     } 
 

 
     if (sec < 10) { 
 
     sec = '0' + sec; 
 
     } 
 

 
     document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill; 
 
     timer(); 
 
    }, 100); 
 
    } 
 
}

<div id="wrapper"> 
 
    <h1 id="label">00:00:00</h1> 
 
    <button id="start">Start</button> 
 
    <button id="pause">Pause</button> 
 
    <button id="reset">Reset</button> 
 
</div>

Answer 3

あなたがsetTimeoutをコールバック関数

var timerObj = null; // NEW LINE 
 
var status = 0; 
 
var time = 0; 
 

 
document.getElementById('start').addEventListener('click', start); 
 
document.getElementById('pause').addEventListener('click', pause); 
 
document.getElementById('reset').addEventListener('click', reset); 
 

 

 
function start() { 
 

 
    status = 1; 
 
    document.getElementById('start').disabled = true; 
 
    timer(); 
 

 

 
} 
 

 
function pause() { 
 
    status = 0; 
 
    document.getElementById('start').disabled = false; 
 
} 
 

 
function reset() { 
 
    clearTimeout(timerObj); // new LINE 
 
    status = 0; 
 
    document.getElementById('start').disabled = false; 
 
    time = 0; 
 
    document.getElementById('label').innerHTML = '00:00:00'; 
 
} 
 

 
function timer() { 
 
    if (status == 1) { 
 
    timerObj = setTimeout(function() { // changed LINE 
 
     time++; 
 
     var min = Math.floor(time/10/60); 
 
     var sec = Math.floor(time/10 % 60); 
 
     var mill = time % 10; 
 

 
     if (min < 10) { 
 
     min = '0' + min; 
 
     } 
 

 
     if (sec >= 60) { 
 
     sec = sec % 60; 
 
     } 
 

 
     if (sec < 10) { 
 
     sec = '0' + sec; 
 
     } 
 

 
     document.getElementById('label').innerHTML = min + ':' + sec + ':' + mill; 
 
     timer(); 
 
    }, 100); 
 
    } 
 
}

<div id="wrapper"> 
 
    <h1 id="label">00:00:00</h1> 
 
    <button id="start">Start</button> 
 
    <button id="pause">Pause</button> 
 
    <button id="reset">Reset</button> 
 
</div>