How to Pause an Interval in JavaScript?

In the process of implementing various functionalities at the same time, there is a need to disable a particular functionality for some time. This assists in observing the working of each functionality. Sometimes, there is a requirement to display a specific functionality for a defined time and then disable it. In such cases, pausing an interval in JavaScript is of great aid in coping with such situations.

How to Pause an Interval in JavaScript?

The following approaches can be utilized in combination with the “setInterval()” method to pause an interval in JavaScript:

• “Boolean Value” approach.
• The “jQuery” approach.
• “clearInterval()” method.

Approach 1: Pause an Interval in JavaScript Using the setInterval() Method With Boolean Value Approach

The “setInterval()” method calls a particular function at specified intervals repeatedly. This approach can be implemented to assign a particular boolean value to the function to be accessed which will result in pausing and removing the set interval.

Syntax

In the above syntax:

• “function” refers to the function to execute and “milliseconds” is the time interval.

Example

To demonstrate this, create an HTML document and place the following lines inside it:

In the above code:

• Within the “<center>” tag, include the “span” element for including the seconds to be elapsed.
• After that, create two buttons having the attached “onclick” event redirecting to two separate functions.
• One of the created buttons will result in pausing the interval and the other will resume it.

Now, in the JavaScript part of the code:

In the above code snippet:

• Access the “span” element by its specified “id” using the “document.getElementById()” method.
• In the next step, assign a boolean value “false” to the “paused” variable. Similarly, initialize the variable “elapsedTime” with “0” to increment it.
• Now, apply the “setInterval()” method to the function and increment the initialized elapsed time in the form of seconds as the interval is set to (1000 milliseconds = 1 second)
• In the next step, declare a function named “resumeInterval()”. Here, assign the boolean value as “false” to the previously assigned variable “paused”. This will result in resuming the paused interval upon the button click.
• Similarly, define a function named “pauseInterval()” which will pause the set interval by assigning the boolean value likewise as discussed.

Output

In the above output, it can be observed that the desired requirement is fulfilled.

Approach 2: Pause an Interval in JavaScript Using the setInterval() Method with the jQuery Approach

This approach can be implemented to access the button directly, attach an event and assign a boolean value.

Syntax

In the above syntax:

• “function” refers to the function to execute and “milliseconds” is the time interval.

Example

The following code-snippet demonstrated the concept:

In the above code:

• Firstly, include the “jQuery” library.
• In the next step, revive the discussed approach for including the “span” element in order to accumulate “seconds” in it.
• After that, similarly, include two separate buttons for pausing and resuming the paused interval.

In the jQuery part, go through the following lines of the code:

In the above code, follow the stated steps:

• Fetch the “span” element by pointing to the “element’s” name.
• In the further code, similarly, allocate a boolean value to the “paused” variable and initialize the elapsed time with “0”.
• Now, revive the discussed approach for applying the “setInterval()” method to the function and similarly increment the elapsed time in the form of seconds.
• Lastly, attach the “click” event to both the accessed buttons and assign the stated boolean value to each of the buttons using the jQuery “on()” method.

Output

In the above-given output, it is evident that the timer is paused and resumed successfully.

Approach 3: Pause an Interval in JavaScript Using the setInterval() Method with clearInterval() Method

The “clearInterval()” method clears the set timer in the setInterval() method. This method can be utilized to pause the set interval “permanently”.

Syntax

In the above syntax:

• “function” refers to the function to execute and “milliseconds” is the set time interval.

In the above syntax:

• “interval” refers to the interval returned from the setInterval() method

Example

Go through the stated lines of code:

• Here, repeat the discussed steps in the previous methods for including the “span” element.
• In the next step, likewise, create a button with an “onclick” event invoking the function pauseInterval().

Perform the stated steps in the JavaScript part of the code:

• In the first step, similarly, access the “span” element by its “id” using the “document.getElementById()” method.
• Repeat the discussed methods for initializing the “elapsed” time, applying the “setInterval()” method, and incrementing the stated elapsed time according to the set interval.
• Finally, declare a function named “pauseInterval()”. Here, apply the “clearInterval()” method having the function “t” as its parameter upon which the interval is set. This will result in pausing the set interval permanently.

Output

Here, the timer is paused permanently.

We have compiled the approaches to pause an interval in JavaScript.

Conclusion

The “boolean value” approach, the “jQuery” approach, or the “clearInterval()” method can be applied to pause an interval in JavaScript. The first approach can be applied to assign a corresponding boolean value upon the accessed function to pause and resume the set timer. The jQuery approach can be utilized to access the button directly, attach an event and assign a boolean value resulting in overall less code complexity. The clearInterval() method can be implemented to pause the set interval permanently. This tutorial explained the approaches to pause an interval in JavaScript.