How to Pause and Play a Loop in JavaScript using Event Listeners ?

There are multiple ways to pause and play a loop in JavaScript using event listeners. Here are two methods:

Method 1: Using setInterval() and clearInterval() functions

In this method, we will use the setInterval() function to create a loop and the clearInterval() function to pause the loop. We will also use event listeners to trigger the pause and play actions.

HTML code:

<button id="play">Play</button>
<button id="pause">Pause</button>

JavaScript code:

let intervalId;

function loop() {
  console.log("Loop is running");
}

document.getElementById("play").addEventListener("click", function() {
  intervalId = setInterval(loop, 1000);
});

document.getElementById("pause").addEventListener("click", function() {
  clearInterval(intervalId);
});

Explanation:

• We define a function called loop() that will be executed repeatedly in a loop.
• We define a variable called intervalId that will hold the ID of the interval created by the setInterval() function.
• We add event listeners to the "Play" and "Pause" buttons.
• When the "Play" button is clicked, we call the setInterval() function and pass the loop() function and the interval time (1000 milliseconds) as arguments. The setInterval() function returns an ID that we store in the intervalId variable.
• When the "Pause" button is clicked, we call the clearInterval() function and pass the intervalId variable as an argument. This stops the loop.

Method 2: Using requestAnimationFrame() and cancelAnimationFrame() functions

In this method, we will use the requestAnimationFrame() function to create a loop and the cancelAnimationFrame() function to pause the loop. We will also use event listeners to trigger the pause and play actions.

HTML code:

<button id="play">Play</button>
<button id="pause">Pause</button>

JavaScript code:

let requestId;

function loop() {
  console.log("Loop is running");
  requestId = requestAnimationFrame(loop);
}

document.getElementById("play").addEventListener("click", function() {
  requestId = requestAnimationFrame(loop);
});

document.getElementById("pause").addEventListener("click", function() {
  cancelAnimationFrame(requestId);
});

Explanation:

• We define a function called loop() that will be executed repeatedly in a loop. Inside the loop() function, we call the requestAnimationFrame() function and pass the loop() function as an argument. This creates a loop that runs as long as the browser tab is open.
• We define a variable called requestId that will hold the ID of the request created by the requestAnimationFrame() function.
• We add event listeners to the "Play" and "Pause" buttons.
• When the "Play" button is clicked, we call the requestAnimationFrame() function and pass the loop() function as an argument. The requestAnimationFrame() function returns an ID that we store in the requestId variable.
• When the "Pause" button is clicked, we call the cancelAnimationFrame() function and pass the requestId variable as an argument. This stops the loop.