javascript: dblclick will not clear interval

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.

Where are you setting up the interval? Show us all the relevant code. — Scott Marcus, Feb 25 '17 at 18:06
Please don't post your code as a comment. Edit your question to include all relevant code (HTML and JavaScript in this case). — Scott Marcus, Feb 25 '17 at 18:09
Please, [edit] your question and provide a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — Sebastian Simon, Feb 25 '17 at 18:09
@ScottMarcus added to edits. Have declared vars at top of original file — forkingwithbill, Feb 25 '17 at 18:11
Not trying to harass you, but you're going to get the best answers if you take the time to post a good question. As @Xufox mentioned above, we don't want everything, but we do want http://stackoverflow.com/help/mcve — Scott Marcus, Feb 25 '17 at 18:21

score 0 · Answer 1 · edited May 23 '17 at 12:16

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.

Scott Marcus · Accepted Answer · 2017-02-25T19:06:57.020

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>

javascript: dblclick will not clear interval

2 Answers2