A continuación se muestra un programa de JavaScript para la manipulación de DOM que básicamente se trata de cómo pausar y reproducir un bucle en JavaScript utilizando detectores de eventos (que no debe confundirse con retraso) . En este artículo, estamos usando JavaScript con HTML, por lo que necesitamos un navegador web, es decir, Chrome (recomendado) o la aplicación Electron. Pausar y reproducir un bucle es una tarea tan difícil en casi todos los lenguajes de programación y no existe una solución simple para pausar un bucle entre su ejecución y volver a reproducirlo al hacer clic en un botón, tal como lo hacemos en los clips de video, pero el concepto JavaScript Promise hace que sea fácil pausar y reproducir bucles con detectores de eventos de elementos DOM. Aquí, pausar y reproducir un bucle no significa retrasar un bucle.
Si está buscando retrasar un bucle en JavaScript, ya hemos creado un artículo separado para ello, visite: https://www.geeksforgeeks.org/how-to-delay-a-loop-in-javascript-using-async -esperar-con-promesa/
Enfoque: nuestro enfoque en este programa para pausar y reproducir un bucle es el mismo que retrasar un bucle usando Promise, pero en lugar de resolver Promise después de una duración específica, resolveremos Promise mediante detectores de eventos. Aquí, en el código, usamos una función llamada Pauser que pausará la ejecución del programa dentro del ciclo, y usamos una variable stats que actúa como un indicador de pausa.
Si las estadísticas son 0, entonces el indicador de pausa es falso y si las estadísticas son 1, entonces el indicador de pausa es verdadero y luego llamará a Pauser() y esperará a que se resuelva el detector de eventos.
Sintaxis de definición de función:
Javascript
// This event listener will listen for
// pause button click which will assign
// stats = 1 (means pause flag true)
document.getElementById("pa")
.addEventListener("click", function () {
stats = 1;
})
function pauser() {
return new Promise(resolve => {
let playbuttonclick = function () {
// Remove the event from play button
// after clicking play button
document.getElementById("playbuttonelement")
.removeEventListener("click", playbuttonclick);
stats = 0;
resolve("resolved");
}
// Here is the event listener for play
// button (instead of setTimeout) which
// will wait for the element to get click
// to get resolved until then it will be
// remain stucked inside Promise
document.getElementById("playbuttonelement")
.addEventListener("click", playbuttonclick)
})
}
Sintaxis de llamada de función:
Javascript
async anyfunction() {
for (let i = 0; i < 10000; i++) {
// This statement will check for
// the stats value and if it is
// equal to 1 then it will call
// pauser() and the loop will
// get paused!
if (stats == 1) await pauser();
}
}
Hemos discutido todo el funcionamiento del código anterior, ahora aquí está el código completo, ¡simplemente copie y cree un archivo html separado y ejecútelo!
Código completo
HTML
<!DOCTYPE html>
<html>
<body>
<button id="pl">Play</button>
<button id="pa">Pause</button>
<div style="display:flex;">
<p id="min">0</p>
<p id="sec">0</p>
<p id="milisec">0</p>
</div>
<script>
document.getElementById("pl")
.setAttribute("disabled", "true")
var stats = 0;
function waitforme(ms) {
return new Promise(resolve => {
setTimeout(() => { resolve('') }, ms);
})
}
function pauser() {
return new Promise(resolve => {
let playbuttonclick = function () {
document.getElementById("pa")
.removeAttribute("disabled")
document.getElementById("pl")
.setAttribute("disabled", "true")
document.getElementById("pl")
.removeEventListener("click",
playbuttonclick);
stats = 0;
resolve("resolved");
}
document.getElementById("pl")
.addEventListener("click", playbuttonclick)
})
}
document.getElementById("pa")
.addEventListener("click", function () {
stats = 1;
document.getElementById("pa")
.setAttribute("disabled", "true")
document.getElementById("pl")
.removeAttribute("disabled")
})
let second;
async function go() {
second = document.getElementById("sec");
for (let a = 0; ; a = a + 100) {
if (a == 1000) {
a = 0;
second.innerHTML =
Number(second.innerHTML) + 1;
}
if (second.innerHTML == 60) {
second.innerHTML = 0;
let minute = document
.getElementById("min");
minute.innerHTML =
Number(minute.innerHTML) + 1;
}
document.getElementById("milisec")
.innerHTML = a / 100;
await waitforme(100);
if (stats == 1) await pauser();
}
}
go();
</script>
</body>
</html>
Producción:
Aplicación de la implementación anterior : cronómetro, pausar/reproducir cualquier animación personalizada realizada en javascript, visualización de datos, etc.
Nota: Habíamos usado el evento ‘clic’ en este código, otros usuarios pueden usar cualquier controlador de eventos como hacer clic, mousenter, mouseover, mouseon, mousemove, keypress, etc. de su elección.
Publicación traducida automáticamente
Artículo escrito por therain0605 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA