javascript: dblclick ne sera pas clair intervalle

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>

J'ai un setInterval appelé intervalle qui exécute une minuterie countup. J'ai un bouton de démarrage qui joue sur le premier clic initial et des pauses sur la seconde très bien. Lorsque je double-clique, la minuterie revient à zéro, mais ne semble pas effacer le minuteur. Jouera juste là où il l'avait laissé avant que l'affichage ait été remplacé par des zéros.

Answer 1

Votre problème principal était votre variable globale totalTenths, qui n'était pas réinitialisée après un double-clic. Vous n'effaciez pas non plus la minuterie colorInterval après un délai d'expiration ou un double-clic. Le fait de tuer correctement les deux minuteurs, de réinitialiser la variable et de réinitialiser l'affichage résout le problème.

Ensuite, l'organisation de vos déclarations peut être d'une grande aide ici. Au lieu de parcourir le document pour les mêmes éléments encore et encore, mettez en cache les références dans les variables.

Aussi votre colorTimer fonction était inutile car tout ce qu'il fait est envelopper la fonction changeColor. Enfin, il est crucial, avec plusieurs temporisateurs, d'arrêter systématiquement les temporisateurs en cours avant d'en lancer un autre qui invoque à nouveau la même fonction. Vous deviez effacer vos deux minuteurs dans la dernière branche de l'instruction if de votre gestionnaire d'événement "clic".

Vous avez eu beaucoup de duplication de code qui rend les choses plus difficiles à lire et à déboguer. Suivez le principe DRY (Do not Repeat Yourself) lors du codage. Si vous tapez deux fois le même code, vous faites probablement quelque chose de mal. Voici une version de travail beaucoup plus compact et nettoyé avec des commentaires en ligne pour expliquer:

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

Je n'ai pas le privilège de commenter, donc ça va ici. Ce n'est pas une réponse complète, je déteste travailler via des applications. D'après ce que j'ai cherché, et savoir, c'est que le clic se déclenchera avant de double-cliquer. Vous pouvez essayer un différent même sur une pression longue ou quelque chose. Ou vous pouvez essayer cette méthode,

How to use both onclick and ondblclick on an element?

Ce que vous devez faire est de gérer le délai d'attente entre les clics et décider si elle se qualifie comme un double ou un seul. Je pense que ça devrait le faire.

Je vais essayer de poster du code quand je peux atteindre mon ordi. Passez une bonne journée.