Javascript функция clearInterval не останавливает анимацию

Question

Javascript функция clearInterval не останавливает анимацию

1

Я вращаю элемент, когда я нажимаю кнопку, используя setInterval вместе с clearInterval чтобы остановить вращение, когда определенное значение reached, очистив interval time t Он работает хорошо, но когда я нажимаю на ту же кнопку снова и снова перед текущим анимация завершается, анимация перестает вращаться. clearInterval в этом случае не работает.

Ниже приведен код:

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;}
}

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>

Итак, как остановить вращение в этом случае?

GNETO DOMINIQUE 07 фев. 2018, в 14:55

Источник

2

clearInterval при нажатии на кнопку, если t определено.
Striped 07 фев. 2018, в 13:32
0

Потому что вы перезаписали t, а первый все еще работает. Таким образом, логика говорит, чтобы остановить оригинал или, если он уже работает, не запускать его снова.
epascarello 07 фев. 2018, в 13:40

Теги:

javascript

setinterval

clearinterval

3 ответа

1

Переменная t объявленная глобально, создает проблему, если вы перемещаете t в локальную область вашего кода. Он должен исправить вашу проблему (предполагая, что предыдущее вращение кликов должно продолжаться)

Если вы хотите прервать предыдущий клик, вы можете следовать решению, данному @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>

PSK 07 фев. 2018, в 11:19

0

В методе rotate, который вызывается по щелчку, вам нужно внести изменения, чтобы определить, задан ли интервал и очистить его, если он есть. См. Ниже обновление кода.

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;}
}

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">
     <!---HERE COME CALENDAR -->
 </div>
 <!-- make rotation-->
 <button id='bnext' onclick='rotate();'>Rotation</button>

John Lay 07 фев. 2018, в 11:04

Ещё вопросы

clearInterval при нажатии на кнопку, если t определено.
Потому что вы перезаписали t, а первый все еще работает. Таким образом, логика говорит, чтобы остановить оригинал или, если он уже работает, не запускать его снова.

epascarello · Accepted Answer · 2018-02-07T12-12-00.000Z

Опция, которую вы, вероятно, после этого, находится в том случае, если она все еще работает, а не запускает ее снова. Посмотрим, если t определено, если оно завершено. И когда цикл закончен, вы можете сбросить интервал.

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, than it is running 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">
  <!---HERE COME CALENDAR -->
</div>
<!-- make rotation-->
<button id='bnext' onclick='rotate();'>Rotation</button>

другой вариант - просто очистить интервал и перезапустить его

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

Большое спасибо, теперь это работает, вы замечательные