설정 간격 애니메이션

Question

문제가 있습니다. 일종의 변수가 사실이라면 초당 약 50 번 확인하고 싶습니다. 사실이라면 1 초의 배경 전환을 수행해야합니다.

setInterval(
     function(){ 


      if(var) { 
        $('.side-bar').animate({ 
         backgroundColor: "#fff" 
         }, 1000); 
      } 
      else { 
      $('.side-bar').animate({ 
         backgroundColor: "#000" 
         }, 1000); 
      } 
      },20); 

문제는 VAR에 해당하는 경우, 이유는 어떤 종류의 애니메이션 문제가 발생할 것입니다, 그리고 그것은 더 이상 변경할 수 없습니다 :이처럼했다. 인터벌 타임을 애니메이션 시간보다 크게 만들면 (예 : 간격 1001 및 애니메이션 1000), 작동합니다. intervaltime < animationtime이면 작동하지 않습니다. 누가 이것을위한 해결책을 알고 있습니까?

Answer 1

함수가 실행될 때마다 두 애니메이션 중 하나를 시작하려고 시도합니다. jQuery는 후속 애니메이션 호출을 큐에 넣습니다. 따라서 함수가 50 번 실행 된 후 1 초가 지나면 50 개의 애니메이션이 대기하게되고 그 중 첫 번째 애니메이션은 거의 완료됩니다.

변수에 대해 폴링을 수행하지 않는 것이 좋습니다. 변수를 설정하는 코드에서 직접 애니메이션을 트리거하는 것이 좋지만 현재 문제가 발생했는지 여부를 확인할 수는 있습니다. 진행중인 애니메이션 등 아무것도하지 않는 경우 :

setInterval(function() { 
    var $sidebar = $('.side-bar'); 
    if ($sidebar.is(':animated')) return; 
    if (condition) { 
     $sidebar.animate({ 
      backgroundColor: "#fff" 
     }, 1000); 
    } else { 
     $sidebar.animate({ 
      backgroundColor: "#000" 
     }, 1000); 
    } 
}, 20); 

데모 : http://jsfiddle.net/yXWPD/

하지만 그렇다하더라도 당신은 여전히 ​​계속 같은 일을 다시 애니메이션 할 것입니다, 당신은 단지 하나 이상의 애니메이션을 대기되지 않을 것이다 한 번에. 조건 변수가 실제로 변경하지 않는 한 다른 애니메이션을 대기 할 필요가 없습니다 :

var condition = false; // your condition var, that is set true by some 
         // other code somewhere 

var prevCondition, 
    $sidebar = $('.side-bar'); 
setInterval(function() { 
    if (prevCondition != condition && !$sidebar.is(':animated')) { 
     prevCondition = condition; 
     $sidebar.animate({ 
      backgroundColor: condition ? "#fff" : "#000" 
     }, 1000); 
    } 
}, 20); 

데모 : http://jsfiddle.net/yXWPD/2/

그러나 다시,이 폴링 개념이 갈 수있는 가장 좋은 방법은 아니다. 변수를 변경하는 코드에서 애니메이션을 트리거해야합니다.