clearInterval (timerId)이 작동하지 않습니다.

Question

mouseenter 이벤트에 카운팅을 시작한 다음 mouseleave 이벤트에서 카운팅을 중지하고 싶습니다. 그러나이 예제의 콘솔에서 볼 수 있듯이 mouseleave 내부의 clearInterval(timerId) 명령이 작동하지 않습니다.

무엇이 문제입니까? 하나는 - 당신은 외부 범위에 같은 이름의 변수를 숨기고 timerId의 이름 당신의 startcounting() 및 increment() 기능의 매개 변수를 가지고 있기 때문에

var timerId; 
 
clearInterval(timerId); 
 

 
$("#demo").mouseenter(function() { 
 
    setTimeout(function() { 
 
    startcounting(timerId); 
 
    }, 2000) 
 
}); 
 

 
$("#demo").mouseleave(function() { 
 
    clearInterval(timerId); 
 
}); 
 

 
function startcounting(timerId) { 
 
    var number = 0; 
 
    timerId = setInterval(function() { 
 
    increment(timerId); 
 
    }, 100); 
 

 
    function increment(timerId) { 
 
    if (number >= 100) { 
 
     number = 0; 
 
     clearInterval(timerId); 
 
    } else { 
 
     number++; 
 
     console.log(number); 
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="demo">demo</div>

Answer 1

문제입니다 필요한 것. 당신이 그 속성을 제거하면

는 코드가 작동합니다

var timerId; 
 
clearInterval(timerId); 
 

 
$("#demo").mouseenter(function() { 
 
    setTimeout(function() { 
 
     startcounting(); // remove here 
 
    }, 2000) 
 
}); 
 

 
$("#demo").mouseleave(function() { 
 
    clearInterval(timerId); 
 
}); 
 

 
function startcounting() { // remove here 
 
    var number = 0; 
 
    timerId = setInterval(function() { 
 
     increment(timerId); 
 
    }, 100); 
 

 
    function increment() { // remove here 
 
     if (number >= 100) { 
 
      number = 0; 
 
      clearInterval(timerId); 
 
     } else { 
 
      number++; 
 
      console.log(number); 
 
     } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="demo">demo</div>