다른 이벤트로 자바 스크립트 프로세스를 중지하는 방법은 무엇입니까?

Question

우리가 if condition에 도달 할 때까지 계속 프로세스 신입 moveover 이벤트,시

function test() { 
    el=document.getElementById("test"); 
    var opacity = 1; 
    var id = setInterval(function() { 
    opacity = opacity - 0.1; 
    el.style.opacity= opacity; 
    \\ if(mouseout) {clearInterval(id);} How to do this? 
    if(opacity == 0) {clearInterval(id);} 
    }, 500); 
} 

document.getElementById("test"). 
addEventListener('mouseover', function(){ 
    test(); 
}); 

같은 자바 스크립트 처리 및 간단한 자전거를 생각해 보자. if condition을 다른 이벤트로 프로세스를 중지하도록 정의 할 수 있습니다.

현재 예제에서는 mouseout 이벤트에서 프로세스를 중단하여 불투명도를 줄이는 방법을 설명합니다.

Answer 1

id 변수가 함수 외부에 있음을 선언하십시오. 그런 다음 mouseout 처리기에서 clearInterval(id)으로 전화 할 수 있습니다. 내 대답을 복사

var id, 
    el = document.getElementById("test"); 

el.addEventListener('mouseover', function(){ 
    var opacity = 1; 
    id = setInterval(function() { 
     opacity = opacity - 0.1; 
     el.style.opacity= opacity; 
     if(opacity == 0) {clearInterval(id);} 
    }, 500); 
}); 
el.addEventListener('mouseout', function() { 
    clearInterval(id); 
}); 

Answer 2

var el = document.getElementById("test"), 
    opacity = 1, 
    id; 


el.addEventListener('mouseover', function(){ 
    id = setInterval(function() { 
      opacity = opacity - 0.1; 
      el.style.opacity= opacity; 
      if(opacity == 0) {clearInterval(id);} 
    }, 500); 
}); 

el.addEventListener("mouseout", function() { 
    clearInterval(id); 
});