javascript：dblclick不会清除间隔

Question

  // sets loop to zero var totalTenths = 0; var interval; var startButton = document.querySelector('#start'); // start and pause button document.querySelector('#start').addEventListener('click', function (e) { var startButton = e.target; if (startButton.innerHTML === 'Start') { startButton.innerHTML = 'Pause'; interval = setInterval(countTimer, 10) colorInterval = setInterval(colorTimer, 1000) } else if (e.target.innerHTML === 'Pause') { startButton.innerHTML = 'Resume'; clearInterval(interval); clearInterval(colorInterval); // here I'm setting the 15 second restart interval waitedTooLong = setInterval(timeout, 15000) } else if (startButton.innerHTML === 'Resume') { startButton.innerHTML = 'Pause'; interval = setInterval(countTimer, 10) colorInterval = setInterval(colorTimer, 1000) } }); // double click to clear function document.querySelector('#start').addEventListener('dblclick', function(e) { var startButton = e.target; if (startButton.innerHTML === 'Resume') { clearInterval(function() { setInterval(countTimer, 10) }); document.getElementById('tenths').innerHTML = '00'; document.getElementById('seconds').innerHTML = '00'; document.getElementById('minutes').innerHTML = '00'; document.getElementById('start').innerHTML = 'Start' } }); // loop that converts 10th of millisec to minute and seconds function countTimer() { totalTenths++; var minutes = Math.floor(totalTenths / 6000); var seconds = Math.floor((totalTenths - minutes * 6000) / 100); var tenths = totalTenths - (minutes * 6000 + seconds * 100); // replaces inner html with loop with added zero until double digits accure if (tenths > 0) { document.getElementById('tenths').innerHTML = '0' + tenths; } if (tenths > 9) { document.getElementById('tenths').innerHTML = tenths; } if (tenths > 9) { document.getElementById('seconds').innerHTML = '0' + seconds; } if (seconds > 9) { document.getElementById('seconds').innerHTML = seconds; } if (tenths > 0) { document.getElementById('minutes').innerHTML = '0' + minutes; } if (minutes > 9) { document.getElementById('minutes').innerHTML = minutes; } } 

  <div class="text-center container"> <button id="start" class="btn btn-large btn-success">Start</button> <p class="clear-msg">double click to clear!</p> <div id="timer" class="well"> <span id="minutes">00</span>:<span id="seconds">00</span>:<span id="tenths">00</span> </div> </div> 

I have a setInterval called Interval which runs a countup timer. I have a start button that plays on first initial click and pauses on second just fine. When I double click, it displays the timer back to zero, but doesn't seem to be clearing the actual timer. Will just play where it was left off before the display was replaced with zeros.

Answer 1

I do not have the privilege to comment, so this goes here. It's not a complete answer, hate working via apps.

From what I have searched, and know, is that on click will fire before double click. You can try a different even like on long press or something. Or you can try this method,

How to use both onclick and ondblclick on an element?

What you have to do is handle the timeout between clicks and decide if it qualifies as a double or a single. I think that should do it.

I'll try and post code when I can reach my comp. Have a great day.

Answer 2

Your main issue was your global totalTenths variable, which was not being reset after a double-click. You also weren't clearing the colorInterval timer after a timeout or a double-click. Properly killing both timers, resetting the variable and re-initializing the display solves the issue.

Next, organizing your declarations can be of great help here. Instead of scanning the document for the same elements over and over, cache references to them in variables.

Also your colorTimer function was unnecessary as all it does is wrap the changeColor function.

Lastly, it's crucial with multiple timers to always stop any currently running timers before starting another one that invokes the same function again. You needed to clear both your timers in the final branch of your "click" event handler's if statement.

You had a lot of duplication of code that makes things more difficult to read and debug. Follow the DRY (Don't Repeat Yourself) principle when coding. If you find yourself typing the same code twice, you are probably doing something wrong. Here is a much more compact and cleaned up working version with comments inline to explain:

 // sets loop to zero // This is the varible that essentially hold the elapsed time. It's global so it must be // reset upon a timeout or a double-click var totalTenths = 0; // Always initialize your variables to something, use null if you don't // have an actual value yet. var interval = null; var colorInterval = null; var waitedTooLong = null; // Get DOM references just once and then use them throughout the rest of the code var startButton = document.getElementById('start'); var m = document.getElementById('minutes'); var s = document.getElementById('seconds'); var t = document.getElementById('tenths'); // start and pause button startButton.addEventListener('click', function (e) { // No need to test what object you're dealing with // you are here because the start button got clicked // that makes "this" === startButton // Don't use .innerHTML when you are only working with raw text // use textContent instead. if (this.textContent === 'Start') { startButton.textContent = 'Pause'; interval = setInterval(countTimer, 10) colorInterval = setInterval(changeColor, 1000) } else if (this.textContent === 'Pause') { startButton.textContent = 'Resume'; clearInterval(interval); clearInterval(colorInterval); // here I'm setting the 15 second restart interval waitedTooLong = setInterval(timeout, 15000) } else { // Clear prior timers clearInterval(interval); clearInterval(colorInterval); this.textContent = 'Pause'; interval = setInterval(countTimer, 10) colorInterval = setInterval(changeColor, 1000) } }); // double click to clear function which is the same as the timeout function startButton.addEventListener('dblclick', timeout); // changes second's color function changeColor() { var red = Math.round(Math.random() * 255); var green = Math.round(Math.random() * 255); var blue = Math.round(Math.random() * 255); s.style.color = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; } // loop that converts 10th of millisec to minute and seconds function countTimer() { totalTenths++; var minutes = Math.floor(totalTenths / 6000); var seconds = Math.floor((totalTenths - minutes * 6000) / 100); var tenths = totalTenths - (minutes * 6000 + seconds * 100); // replaces inner html with loop with added zero until double digits accure if (tenths > 0) { t.textContent = '0' + tenths; } if (tenths > 9) { t.textContent = tenths; } if (tenths > 9) { s.textContent = '0' + seconds; } if (seconds > 9) { s.textContent = seconds; } if (tenths > 0) { m.textContent = '0' + minutes; } if (minutes > 9) { m.textContent = minutes; } } // 15 second restart funciton function timeout() { clearInterval(interval); clearInterval(colorInterval); t.textContent = '00'; s.textContent = '00'; m.textContent = '00'; startButton.textContent = 'Start' s.style.color = "#000"; // You must reset this global variable for the counter to reset properly totalTenths = 0; // <<------------------------ } 

 <script type="text/javascript" src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,fetch,Array.prototype.includes"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="text-center container"> <button id="start" class="btn btn-large btn-success">Start</button> <p class="clear-msg">double click to clear!</p> <div id="timer" class="well"> <span id="minutes">00</span>: <span id="seconds">00</span>: <span id="tenths">00</span> </div> </div>