Estoy tratando de implementar la función de reproducción y pausa en mi código. Pero después de hacer una pausa, no vuelve a empezar. Traté de almacenar la función del temporizador de actualización en un objeto y luego lo llamé fuera de la clase para poder pausarlo. ¿Cómo puedo mejorar mi implementación?
var playPause = document.querySelector(".playpause"); var x = document.querySelector(".div"); var y = document.querySelector(".div1"); var countdown = document.querySelector(".countdown"); const initialTime = 20; let time = 0; let lala = 1; let gate = false; const timerClass = { updatecountDown: setInterval(function() { const min = Math.floor(time / 60); let sec = time % 60; sec = sec < 10 ? "0" + sec : sec; countdown.innerHTML = `${min}:${sec}`; let ini = (time * 100) / initialTime; let percentage = ini * (1 / 100) * y.offsetWidth; x.style.width = percentage + "px"; if (time == initialTime) clearInterval(updatecountDown); time++; }, 1000), }; timerClass.updatecountDown; playPause.addEventListener("mouseup", function() { if (gate == false) { clearInterval(timerClass.updatecountDown); playPause.innerHTML = `Play`; gate = true; } else { // Want to write something here so that timer start again timerClass.updatecountDown; playPause.innerHTML = `Pause`; gate = false; } }); .div { background: orange; width: 60px; height: 20px; } .div1 { background-color: gray; } .dot { background-color: hotpink; border-radius: 50%; height: 25px; width: 25px; left: 100px; display: inline-block; } .countdown { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 50px; } <body> <pc class='countdown'>10.10</pc> <div class="div1"> <div class="div"> <span class="dot"> </span> </div> </div> <button class="playpause">Pause</button> </body>Para que esto funcione, debe extraer la función pasada a setInterval . Al hacerlo, puede llamarlo directamente cuando necesite reiniciarlo. El problema es que una vez que borra el intervalo, timerClass.updatecountDown es nulo y no tiene concepto de la función de intervalo.
var playPause = document.querySelector(".playpause"); var x = document.querySelector(".div"); var y = document.querySelector(".div1"); var countdown = document.querySelector(".countdown"); const initialTime = 20; let time = 0; let lala = 1; let gate = false; const intervalFn = function() { const min = Math.floor(time / 60); let sec = time % 60; sec = sec < 10 ? "0" + sec : sec; countdown.innerHTML = `${min}:${sec}`; let ini = (time * 100) / initialTime; let percentage = ini * (1 / 100) * y.offsetWidth; x.style.width = percentage + "px"; if (time == initialTime) clearInterval(timerClass.updatecountDown); time++; }; const timerClass = { updatecountDown: setInterval(intervalFn, 1000), }; playPause.addEventListener("mouseup", function() { if (gate == false) { clearInterval(timerClass.updatecountDown); playPause.innerHTML = `Play`; gate = true; } else { // Want to write something here so that timer start again timerClass.updatecountDown = setInterval(intervalFn, 1000); playPause.innerHTML = `Pause`; gate = false; } }); .div { background: orange; width: 60px; height: 20px; } .div1 { background-color: gray; } .dot { background-color: hotpink; border-radius: 50%; height: 25px; width: 25px; left: 100px; display: inline-block; } .countdown { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-size: 50px; } <body> <pc class='countdown'>10.10</pc> <div class="div1"> <div class="div"> <span class="dot"> </span> </div> </div> <button class="playpause">Pause</button> </body>Supongo que desea que updatecountDown sea una función. Actualmente, es una propiedad que contiene la identificación del temporizador (devuelta por setInterval ).
Sugeriría crear dos funciones, comenzar y detenerse así.
const timerClass = { // holds the timer Id updatecountDown: null, // start/resume timer start: function() { this.updatecountDown = setInterval(function() { const min = Math.floor(time / 60); let sec = time % 60; sec = sec < 10 ? "0" + sec : sec; countdown.innerHTML = `${min}:${sec}`; let ini = (time * 100) / initialTime; let percentage = ini * (1 / 100) * y.offsetWidth; x.style.width = percentage + "px"; if (time == initialTime) this.stop(); time++; }.bind(this), 1000); }, // pause timer stop: function() { clearInterval(this.updatecountDown); } }; // Starting timer timerClass.start(); // timerClass.updatecountDown; // changing from mouseup to click playPause.addEventListener("click", function() { if (gate == false) { // clearInterval(timerClass.updatecountDown); timerClass.stop(); playPause.innerHTML = `Play`; gate = true; } else { // Want to write something here so that timer start again // timerClass.updatecountDown; timerClass.start(); playPause.innerHTML = `Pause`; gate = false; } });