I have two buttons, show time, and stop time. when click on show time, it set up setTimeout() to update the current time. when stop time is clicked, i want to stop the time 5 sec later. the problem I'm having is that if I click on show time once, then I click stop time, the time is till ticking. I need to click stop time twice in order to stop the time. so I think there are multiple instances of setTimeout() when i click show time multiple times. I'm wondering how can I make sure there is only one setTimeout(), so even show time is clicked multiple times, it only requires to click on stop time once to stop the time.
<body>
<script>
var iTimeout;
function startTime() {
var today = new Date();
var hour = today.getHours();
var min = today.getMinutes();
var sec = today.getSeconds();
document.getElementById('time').ierHTML =
hour + ":" + min + ":" + sec;
iTimeout = window.setTimeout(startTime, 1000);
}
function stopTimer() {
window.setTimeout(function() {
window.clearTimeout(iTimeout);
console.log("clear");
}, 5000);
}
</script>
</head>
<div id="time"></div>
<button onclick="stopTimer()">stop time</button>
<button onclick="startTime()">show time</button>
</body>