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，它运行一个倒数计时器。我有一个开始按钮，它在第一次初始点击时播放并在第二次暂停时就好了。当我双击时，它显示计时器归零，但似乎并没有清除实际的计时器。将只在显示被零替换之前中断的地方播放。

Answer 1

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

接下来，在这里组织您的声明会很有帮助。不要一遍又一遍地扫描文档以查找相同的元素，而是在变量中缓存对它们的引用。

您的colorTimer 函数也没有必要，因为它所做的只是包装changeColor 函数。

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

您有很多重复的代码，这使得阅读和调试变得更加困难。编码时遵循 DRY（不要重复自己）原则。如果您发现自己输入了两次相同的代码，那么您可能做错了什么。这是一个更紧凑、更简洁的工作版本，其中包含 cmets inline 来解释：

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

Answer 2

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

根据我的搜索并知道，点击会在双击之前触发。你甚至可以尝试不同的方法，比如长按或其他东西。或者你可以试试这个方法，

How to use both onclick and ondblclick on an element?

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

当我可以到达我的比赛时，我会尝试发布代码。 祝你有美好的一天。