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

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

根据我的搜索和了解，单击会在双击之前触发。您甚至可以尝试不同的方式，例如长按或其他方式。或者你可以试试这个方法，

How to use both onclick and ondblclick on an element?

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

我会尝试 post 代码，当我可以到达我的 comp 时。祝你有美好的一天。

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

javascript: dblclick will not clear interval

javascript

setinterval

clearinterval