jQuery mouseleave 및 clearInterval이 작동하지 않습니다.

Question

SVG 이미지로 게임을 시작했는데 .mouseenter()를 켜고 .mouseleave()를 정지해야하는 두 개의 기어 휠을 만들었습니다. 설정은 setInterval 함수를 통해 이루어집니다. Linux Chromium에서 모든 것이 잘 작동하기 때문에 이상한 문제가 있습니다. Linux Firefox 및 Windows에서 Chrome 및 Firefox gearwheels은 mouseLeave에서 중지하지 않고 mouseEnter에서 속도를 높입니다. 나는 .hover()와 .mouseenter()/mouseLeave() 메소드를 모두 시도했다.

내 코드 :

$(document).ready(function(){ 
    var deg = 0; 
    var rotate_right = $('#cog1 use'); 
    var rotate_left = $('#cog2 use'); 
    var interval; 
     $("#cogs").hover(
      function(){ 
       interval = setInterval(function(){ 
       if(deg >= 360) deg = 0; 
        deg += 1; 
        rotate_right.attr('transform', 'rotate('+deg+',32,32)'); 
        rotate_left.attr('transform', 'rotate('+-deg+',32,32)'); 
      }, 10); 
      }, 
      function(){ 
       clearInterval(interval); 
      } 
     ); 
}); 

내 JSfiddle

Answer 1

문제는 호버 기능입니다.

div # cogs에서 마우스를 움직여도 마우스 오버가 발생합니다.

이렇게하면 새 timeInterval이 추가되지만 clearInterval은 이전의 clearInterval을 지우기 위해 호출되지 않습니다.

호버 기능의 첫 번째 줄에 if(interval) clearInterval(interval); 을 추가하기 만하면됩니다.