clearTimeout() 함수가 제대로 작동하지 않습니다.

Question

이 코드 줄이 있지만 작동하지 않으며 함수가 문제의 원인이라고 추측합니다. 내 JavaScript는 다음과 같습니다.

$(document).ready(function() { 
    var interval; 

    function move(ele) { 
     $(ele).animate({ 
      'background-position-y': '0px' 
     }, 200, function() { 
      $(ele).animate({ 
       'background-position-y': '3px' 
      }, 200, function() { 
       interval = setTimeout(function() { 
        move(ele) 
       }, 3); 
      }); 
     }); 
    }; 
    $(".up").hover(function() { 
     move(this), function() { 
      clearTimeout(interval); 
      interval = null; 
      $(this).css("background-position", "80px 3px "); 
     }; 
    }); 

내가 여기서 잘못하고있는 것을 누군가가 설명 할 수 있습니까?

Answer 1

David에 의해 제안 된 적절한 닫는 중괄호가 있더라도 여전히 애니메이션을 계속 유지하는 문제가 있습니다. 타이머 (간격)를 지우면 .animate()에 전달 된 콜백 함수가 실행되지 않습니다. 따라서 interval = setTimeout(...)은 여전히 ​​실행되어 애니메이션주기를 영속화합니다.

전역 변수를 제거하는 것과 같은 몇 가지 개선 사항이 있지만 작업 예제에서는 코드를 약간 수정했습니다. http://jsfiddle.net/aKKRk/

Answer 2

오류가 발생했습니다. 실제로 인 것처럼 보입니다. 문제는 두 가지가 아니라 하나의 기능 만 hover 번으로 전달하는 것입니다. ….hover(function() { move(…); }, function() { … }) 대신 ….hover(function() { move(…), function() { … } })이 표시됩니다.

앞으로는 코드를 들여 쓰는 습관을 짓는다면 이러한 종류의 오류를 발견하는 것이 훨씬 쉬울 것입니다.