Как приостановить и воспроизвести цикл в JavaScript с помощью прослушивателей событий?
Ниже приведена программа JavaScript для манипулирования DOM, которая в основном о том, как приостановить и воспроизвести цикл в JavaScript с использованием прослушивателей событий (не путать с задержкой) . В этой статье мы используем JavaScript с HTML, поэтому нам нужен веб-браузер, например, Chrome (рекомендуется) или приложение Electron. Приостановка и воспроизведение цикла — такая сложная задача почти во всех языках программирования, и нет простого решения, чтобы приостановить цикл между его выполнением и воспроизвести его снова по нажатию кнопки, как мы это делаем в видеоклипах, но концепция JavaScript Promise позволяет легко приостанавливать и воспроизводить цикл с прослушивателями событий элементов DOM. Здесь пауза и воспроизведение цикла не означает задержку цикла.
Если вы ищете задержку цикла в JavaScript, мы уже создали для нее отдельную статью. Посетите: https://www.geeksforgeeks.org/how-to-delay-a-loop-in-javascript-using-async. -ожидание-с-обещанием/
Подход: Наш подход в этой программе к приостановке и воспроизведению цикла такой же, как и к задержке цикла с помощью Promise, но вместо того, чтобы разрешать Promise после определенного времени, мы будем разрешать Promise прослушивателями событий. Здесь в коде мы использовали функцию с именем Pauser , которая будет приостанавливать выполнение программы внутри цикла, и мы использовали переменную stats , которая действует как флаг для паузы.
Если статистика равна 0, то флаг паузы равен false, а если статистика равна 1, то флаг паузы равен true, а затем он вызовет Pauser() и будет ждать, пока прослушиватель событий будет разрешен.
Синтаксис определения функции:
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) })} |
Синтаксис вызова функции:
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(); }} |
Мы обсудили всю работу кода выше, теперь вот полный код, просто скопируйте и создайте отдельный html-файл и запустите его!
Полный код
Выход:
Применение вышеуказанной реализации : секундомер, приостановка/воспроизведение любой пользовательской анимации, созданной в javascript, визуализация данных и т. д.
Примечание. В этом коде мы использовали событие «щелчок», другие пользователи могут использовать любой обработчик событий, такой как щелчок, наведение мыши, наведение мыши, наведение мыши, перемещение мыши, нажатие клавиши и т. д. по своему выбору.