clearInterval() setInterval() 사용 후 정의되지 않은 오류

Question

인라인이 아니지만 YUI 라이브러리의 대화 상자가 강제로 알 수 있습니다. 내 문제는이 div 위로 마우스를 가져갈 때마다 여백 왼쪽 스크롤이 활성화되지만 div에서 마우스를 움직일 때 멈추지 않는다는 것입니다.

<div class="span1" onmouseover=" 
      var timerID; 
      $(document).ready(function(){    
        timerID = setInterval(scrollLeft, 10); 

        function scrollLeft(){ 
         $('.inner_wrapper').animate({ 
          marginLeft: '-=30px' 
         }); 
        } 
      }); 
      " onmouseout="clearInterval(timerID)"> 
     </div> 

편집 :

Uncaught ReferenceError: timerID is not defined

그리고 여기에 코드의 다음 JS 콘솔보고 것은 내가 대화 상자 내부의 SCRIPT 태그를 실행할 수 있다는 것입니다 (그들은 이미 스크립트를 통해 생성되는 필터 어떤 onmouseover 및 onmouseout과 같은 인라인 외에도 자바 스크립트). 따라서 onmouseover 및 onmouseout 핸들을 단일 함수로 캡슐화하라는 제안은이 경우 작동하지 않습니다.

Answer 1

범위 문제입니다. 변수 timerID은 onmouseout에서 볼 수 없습니다.

일반적으로 모든 것을 속성에 넣는 대신 함수에 넣는 것이 좋습니다. 이렇게하면 이러한 모든 범위 문제를 피할 수 있습니다. 그리고 on-...- 속성 대신 핸들러를 사용하는 것이 더 좋은 아이디어입니다.

onmouseover 특성 외부에서 함수를 정의하고이를 지우는 mouseout에서 다른 함수를 호출하십시오. 이 같은

뭔가 더 나은

var handler = (function(){ 
    var timerID; 
    function scrollLeft(){ 
     $('.inner_wrapper').animate({ 
      marginLeft: '-=30px' 
     }); 
    } 
    return{ 
     mouseover:function(){    
      timerID = setInterval(scrollLeft, 10); 
     }, 
     mouseout:function(){ 
      clearInterval(timerID); 
     } 
    } 
})(); 

다음

<div class="span1" onmouseover="handler.mouseover()" onmouseout="handler.mouseout()"> 

또는 (불쾌한 글로벌 한다거나 할을 피하기 위해)를 통해 직접 처리기를 바인딩 : 새로운 기준으로

$('.span1').hover(function() { 
    timerID = setInterval(scrollLeft, 10); //mouseover 
}, function() { 
    clearInterval(timerID); //mouseout 
}); 

jQuery 1.7, .on()이 선호됩니다.

Answer 2

귀하의

var timerID; 

변수는 onmouseover 핸들러 내부의 지역 변수로 정의됩니다, 그래서 onmouseout 핸들러는 그것에 대해 알 수 없습니다.

전역 변수로 선언하거나 더 나은 방법으로 필드에 timerID, 필드에 mouseover 및 mouseout 처리기를 포함하는 객체로 캡슐화하십시오.

Answer 3

$(document).ready(function() { 
    var timerID = null; 

    function scrollleft() { 
     $('.inner_wrapper').animate({ 
      marginLeft: '-=30px' 
     }); 
    } 
    $('div.span1').hover(function() { 
     timerID = setInterval(scrollLeft, 10); 
    }, function() { 
     clearInterval(timerID); 
    }); 
});​ 

하고

$(document).ready(function() { 
    var timerID = null; 

    function scrollleft() { 
     $('.inner_wrapper').animate({ 
      marginLeft: '-=30px' 
     }); 
    } 

    $('div.span1').on('hover', function(e) { 
     if(e.type == 'mouseenter') { 
      timerID = setInterval(scrollLeft, 10); 
     } else { 
      clearInterval(timerID); 
     } 
    }); 
}); 

Answer 4

당신의 마크 업 및 자바 스크립트를 섞어 좋지 않아 다음 .on('hover')을 사용하는 경우는

<div class="span1"></div> 

처럼 html로합니다. 그들을 분할하고 다음과 같이 별도로 작업하십시오.

HTML :

<div class="span1"></div> 

자바 스크립트 :

var timerID = null; 

function scrollLeft() { 
    $('.inner_wrapper').animate({ 
     marginLeft: '-=30px' 
    }); 
} 

$(document).ready(function() { 
    $(".span1").hover(function() { 
     timerID = setInterval(scrollLeft, 10); 
    }, function() { 
     clearInterval(timerID); 
    }); 
}); 

Answer 5

timerId가이 onmouseout에 onMouseover와 정의,하지만하지 않습니다.

그래서 당신이 할 수있는 일은 다음과 같다 :

<script type="text/javascript"> 

    var scrollLeft = function(){ 
     $('.inner_wrapper').animate({ 
      marginLeft: '-=30px' 
     }); 
    }; 

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

     $("#timer").mouseover(function() { 

      timerID = setInterval(scrollLeft, 10); 


     }).mouseout(function() { 
      clearInterval(timerID) 
     }); 

    }); 

</script> 

<div class="span1" id="timer"> </div>