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>

我有一个名为Interval的setInterval，它运行一个计数器。我有一个开始按钮，在第一次初始点击时播放，暂停在第二次就好了。当我双击时，它会将计时器显示为零，但似乎没有清除实际的计时器。只有在用零替换显示之前，才会播放它停止的位置。

Answer 1

我没有权利发表评论，所以这就在这里。这不是一个完整的答案，讨厌通过应用程序工作。

从我搜索过的内容中可以看出，在点击之前点击将会点击。您可以尝试不同的东西，即使是长按或其他东西。或者你可以尝试这种方法，

How to use both onclick and ondblclick on an element?

您需要做的是处理点击之间的超时并确定它是否符合双重或单一条件。我认为应该这样做。

当我能够达到我的补偿时，我会尝试发布代码。祝你有美好的一天。

Answer 2

您的主要问题是您的全局totalTenths变量，双击后未重置该变量。超时或双击后，您也没有清除colorInterval计时器。正确杀死两个计时器，重置变量并重新初始化显示可以解决问题。

接下来，在此处组织您的声明可能会有很大帮助。不是一遍又一遍地扫描文档中的相同元素，而是在变量中缓存对它们的引用。

此外，您的colorTimer函数是不必要的，因为它只是包装了changeColor函数。

最后，在启动另一个再次调用相同函数的计时器之前，始终停止任何当前正在运行的计时器是至关重要的。您需要在“click”事件处理程序的if语句的最后一个分支中清除两个计时器。

你有很多代码重复，使得阅读和调试更加困难。在编码时遵循DRY（不要重复自己）原则。如果您发现自己两次输入相同的代码，那么您可能做错了什么。这是一个更加紧凑和清理的工作版本，内联注释解释：

// 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不会清除间隔

2 个答案: