ClearInterval () не остановит мою функцию поворота

Question

Я использую плагин jQuery Rotate, чтобы анимировать поворот изображения на 90 градусов, а затем остановить вращение.

Моя проблема в том, что он не остановится, даже после вызова clearInterval ();

$(document).ready(function() {
    var finalAngle;
    var intval = setInterval(function func() 
    {
      $("#myimg").rotate(1);
      if(typeof func.angle == 'undefined' )
      {
           func.angle = 0;
      }

      func.angle += 1;

      finalAngle = func.angle;

    }, 1);

    if(finalAngle == 90)
    {
      clearInterval(intval);
    }
});

По сути, все, что я делаю - это (статически) подсчет углов, и как только он достигнет 90, вызову функцию clearInterval. Мне пришлось ввести еще одну переменную для хранения счетчика, чтобы я мог получить к нему доступ вне функции setInterval.

Answer 1

Это легко. Вызывается setInterval, затем оценивается условие с finalAngle и через одну миллисекунду вызывается ваша функция вращения. Поэтому clearInterval никогда не вызывается, когда finalAngle равен 90.

Этот код должен работать для вас:

$(document).ready(function() {

    var intval = setInterval(function func() 
    {
      $("#myimg").rotate(1);
      if(typeof func.angle == 'undefined' )
      {
           func.angle = 0;
      }

      func.angle += 1;

      if (func.angle == 90)
      {
        clearInterval(intval);
      }    
    }, 1);  
});

Answer 2

Оператор if выполняется один раз.Попробуйте это?

$(document).ready(function() {
    var finalAngle;
    var intval = setInterval(function func() 
    {
      $("#myimg").rotate(1);
      if(typeof func.angle == 'undefined' )
      {
           func.angle = 0;
      }

      func.angle += 1;
      finalAngle = func.angle;
      if(finalAngle == 90)
      {
          clearInterval(intval);
      }


    }, 1);


});

Хотя я не понимаю, почему вы не можете просто сойти с рук ...

$(document).ready(function() {
    var finalAngle=0;
    var intval = setInterval(function func() 
    {
      $("#myimg").rotate(1);

      finalAngle++;

      if(finalAngle == 90)
      {
          clearInterval(intval);
      }


    }, 1);


});