The clearInterval function in Javascript may not effectively halt an ongoing animation

Question

The clearInterval function in Javascript may not effectively halt an ongoing animation

Whenever I press a button, the element rotates using setInterval and clearInterval to stop rotation at a specific value by clearing the interval time t. Everything works perfectly except when I continually click the same button before the current animation finishes, the rotation does not stop as expected. The clearInterval function does not work in this scenario.

The following code showcases the issue:

var t; // interval 
var x = 0 ; // counter
var cal ; // element to rotate

function prepareRotatesX(){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
   
    t = setInterval(function(){ 
      prepareRotatesX();
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

<div id="myCalendar">
     <!---HERE COME CALENDAR -->
 </div>
 <!-- make rotation-->
 <button id='bnext' onclick='rotate();'>Rotation</button>

How can we resolve the issue of stopping the rotation in this particular case?

javascript setinterval clearinterval

Answer 1

Answer №1

If you want to ensure that a process is not run multiple times concurrently, one approach is to check if it is already running and exit if so. Once the operation is completed, you can then reset the interval.

var t; // interval 
var x = 0; // counter
var cal; // element to be rotate

function prepareRotatesX() {
  x = x + 5;
  cal = document.getElementById("myCalendar");
  cal.style.transform = "rotateX(" + x + "deg)";

  if (x > 360) {
    clearInterval(t);
    x = 0;
    t = null
  }
}

function rotate() {
  if (t) return;  // If 't' is defined, it means operation is in progress, so exit
  t = setInterval(function() {
    prepareRotatesX();
  }, 10);
}

#myCalendar {
  position: absolute;
  top: 45px;
  left: 20px;
  border: 2px solid blue;
  width: 210px;
  height: 170px;
  background-color: blue;
}

<div id="myCalendar">
  <!---CALENDAR CONTENT HERE-->
</div>
<!-- Start rotation with button click -->
<button id='bnext' onclick='rotate();'>Rotate</button>

Another option is to clear the interval and restart it instantly:

function rotate() {
  if (t) clearInterval(t)
  t = setInterval(function() {
    prepareRotatesX();
  }, 10);
}

Answer 2

If you want to ensure that a process is not run multiple times concurrently, one approach is to check if it is already running and exit if so. Once the operation is completed, you can then reset the interval.

var t; // interval 
var x = 0; // counter
var cal; // element to be rotate

function prepareRotatesX() {
  x = x + 5;
  cal = document.getElementById("myCalendar");
  cal.style.transform = "rotateX(" + x + "deg)";

  if (x > 360) {
    clearInterval(t);
    x = 0;
    t = null
  }
}

function rotate() {
  if (t) return;  // If 't' is defined, it means operation is in progress, so exit
  t = setInterval(function() {
    prepareRotatesX();
  }, 10);
}

#myCalendar {
  position: absolute;
  top: 45px;
  left: 20px;
  border: 2px solid blue;
  width: 210px;
  height: 170px;
  background-color: blue;
}

<div id="myCalendar">
  <!---CALENDAR CONTENT HERE-->
</div>
<!-- Start rotation with button click -->
<button id='bnext' onclick='rotate();'>Rotate</button>

Another option is to clear the interval and restart it instantly:

function rotate() {
  if (t) clearInterval(t)
  t = setInterval(function() {
    prepareRotatesX();
  }, 10);
}

Answer 3

Answer №2

Issue arises when the global declaration of variable t causes trouble. Moving t to a local scope within your code should resolve this problem (assuming you want the previous clicks rotation to continue).

If you wish to stop the previous click action, you can refer to the solution provided by @epascarello.

var x = 0 ; // counter
var cal ; // element to be rotate

function prepareRotatesX(t){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
   var t; // interval 
    t = setInterval(function(){ 
      prepareRotatesX(t);
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

   <div id="myCalendar">
     <!---HERE COME CALENDAR -->
 </div>
 <!-- make rotation-->
 <button id='bnext' onclick='rotate();'>Rotation</button>

Answer 4

Issue arises when the global declaration of variable t causes trouble. Moving t to a local scope within your code should resolve this problem (assuming you want the previous clicks rotation to continue).

If you wish to stop the previous click action, you can refer to the solution provided by @epascarello.

var x = 0 ; // counter
var cal ; // element to be rotate

function prepareRotatesX(t){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
   var t; // interval 
    t = setInterval(function(){ 
      prepareRotatesX(t);
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

   <div id="myCalendar">
     <!---HERE COME CALENDAR -->
 </div>
 <!-- make rotation-->
 <button id='bnext' onclick='rotate();'>Rotation</button>

Answer 5

Answer №3

When implementing the rotate method that is triggered on click, it is essential to include a check for the defined interval and clear it if necessary. The updated code snippet below illustrates this:

var t; // interval 
var x = 0 ; // counter
var cal ; // element to be rotated

function prepareRotatesX(){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
    if(t !== undefined) {
        clearInterval(t);
    }
    t = setInterval(function(){ 
      prepareRotatesX();
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

<div id="myCalendar">
     <!---CALENDAR CONTENT GOES HERE-->
 </div>
 <!-- initiate rotation with button click -->
 <button id='bnext' onclick='rotate();'>Rotate</button>

Answer 6

When implementing the rotate method that is triggered on click, it is essential to include a check for the defined interval and clear it if necessary. The updated code snippet below illustrates this:

var t; // interval 
var x = 0 ; // counter
var cal ; // element to be rotated

function prepareRotatesX(){
    x=x+5;
    cal =document.getElementById("myCalendar");
    cal.style.transform="rotateX("+x+"deg)";
    
    if(x>360){ clearInterval(t); x=0;}
}

function rotate(){
    if(t !== undefined) {
        clearInterval(t);
    }
    t = setInterval(function(){ 
      prepareRotatesX();
    }, 10);
}

#myCalendar{ 
                position: absolute;
                top:45px;
                left:20px;
                border: 2px solid blue;
                width: 210px;
                height:170px;
                background-color:blue;
            }

<div id="myCalendar">
     <!---CALENDAR CONTENT GOES HERE-->
 </div>
 <!-- initiate rotation with button click -->
 <button id='bnext' onclick='rotate();'>Rotate</button>

The clearInterval function in Javascript may not effectively halt an ongoing animation

Answer №1

Answer №2

Answer №3

Similar questions

Adjust the text size of a label in material-ui

Difficulty parsing JSON in MVC .Net Core Controller

Decoding the enigma of addEventListener in Nuxt: Unveiling the "referenceError: window is not defined" issue

JavaScript will continue to run uninterrupted even after refreshing the webpage

Exploring the Depths with a Javascript Canvas Deep Zoom Library

problem with the video pathway in the javascript document

Steps to implement an image zoom function triggered by a button click

Activate browser scrollbar functionality

Select a random option from the dropdown menu

What is the best way to begin at a specific index in an array without skipping any elements?

Having trouble storing radio buttons and checkboxes in MySQL database using AJAX

The PrimeNG FullCalendar feature seems to be malfunctioning and cannot be located

"Enhancing Hangman by updating the object-oriented array of values

Designing a Curved Stepper Component in the Shape of an S

Set a variable in Node.js to capture the return value of res.json

Show various Bootstrap Alert Messages based on the type of error detected?

Using jQuery to filter or duplicate options in a select box - a step-by-step guide!

Retrieve information from deeply nested JSON and showcase using Vue-Multiselect

Safari's problem with CSS transitions

Console.log() will not display any JSON duplicates