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>

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

Answer 1

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

从我搜索到的情况来看，我知道，点击会在双击之前触发。你可以尝试一种不同的方式，甚至像长按或其他方式。或者你可以试试这个方法，

如何在元素上同时使用onclick和ondblick？

你要做的是处理点击之间的超时，并决定它是双倍还是单倍。我想应该可以了。

当我能到达我的公司时，我会试着邮寄代码。有一个伟大的一天。

Answer 2

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

接下来，组织您的声明在这里会有很大的帮助。与其一遍又一遍地扫描文档中的相同元素，不如将对它们的引用缓存在变量中。

另外，您的colorTimer函数是不必要的，因为它所做的只是包装changeColor函数。

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

你有很多重复的代码，这使得阅读和调试更加困难。编码时遵循干燥（不要重复）原则。如果你发现自己输入了两次相同的代码，你可能是做错了什么。下面是一个更简洁、更清晰的工作版本，其中内嵌了注释以解释：

// 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>