clearInterval()은 어떻게 작동합니까?

Question

주어진 코드에서 setInterval() 및 clearInterval() 메서드를 사용하고 있습니다. 여기에 setInterval()에 대한 두 개의 버튼과 clearInterval()의 두 개의 버튼이 있습니다. 두 버튼을 모두 클릭하면 clearInterval() 버튼이 작동하지 않습니다.

HTML :

<div id="a"></div> 

<button id='bt1'>start</button> 
<button id='bt2'>Stop</button> 
<button id='bt3'>Start</button> 
<button id='bt4'>Stop</button> 

자바 스크립트 :

var Graph = { 
graph: null, 
start: function (i) { 
    this.graph = setInterval(function() { 
     $('#a').html(i++); 
    }, 1000); 
}, 
stop: function() { 
    window.clearInterval(this.graph); 
} 
}; 
$('#bt1').click(function(){ 
    Graph.start(1); 
}); 
$('#bt2').click(function(){ 
    Graph.stop(); 
}); 
$('#bt3').click(function(){ 
    Graph.start(1); 
}); 
$('#bt4').click(function(){ 
    Graph.stop(); 
}); 

바이올린 : Fiddle

Answer 1

, 첫 번째 타이머 ID가 덮어 쓰기이 이전 실행 타이머를 중지합니다. ID를 개별적으로 배열에 저장하거나 적어도 개별 변수 이름으로 저장하십시오. 여기에 배열하여 하나 개의 조정입니다 :

var Graph = { 
graph: [0, 0],        /// turn this into an array 
start: function(id, i) {      /// add a new parameter here 
    this.graph[id] = setInterval(function() { 
     $('#a').html(i++); 
    }, 1000); 
}, 
stop: function (id) {      /// add parameter here as well 
    window.clearInterval(this.graph[id]); 
} 
}; 
$('#bt1').click(function(){ 
    Graph.start(0, 1);      /// set index 0 with this timer id 
}); 
$('#bt2').click(function(){ 
    Graph.stop(0);       /// stop using id at index 0 
}); 
$('#bt3').click(function(){ 
    Graph.start(1, 1);      /// etc. 
}); 
$('#bt4').click(function(){ 
    Graph.stop(1); 
}); 

귀하의 i 변수가 당신이 무엇을하려고에 따라 같은 일의 대상이 될 수있다; 나는 여기서 그것을 언급하지 않았다.

희망이 도움이됩니다.

Answer 2

clearInterval() 방법은 setInterval() 방법 설정 타이머를 지 웁니다.

setInterval()에서 반환 된 ID 값이 clearInterval() 메서드의 매개 변수로 사용됩니다.

참고 :이 간격 방법을 만들 때, 당신이 전역 변수를 사용해야합니다 clearInterval() 방법을 사용할 수 있도록 :

myVar = setInterval("javascript function",milliseconds); 

는 그런 다음 사항 clearInterval을 호출하여 실행을 중지 할 수있을 것이다 () 방법.

또한에만 setInterval에 모두 호출의 결과를 저장하는 하나의 변수가이 answer

Answer 3

를 참조 할 수 있습니다, 당신은 두 번째 통화에 덮어 쓰기하는 즉, 첫 번째 타이머는 클리어 할 수 없도록.

Answer 4

# bt1 버튼을 클릭 한 다음 # bt3 버튼을 클릭하면 두 번째 start() 함수 호출이 Graph 객체의 변수를 덮어 씁니다. 첫 번째 setInterval() 호출에 의해 반환 된 ID 값이 손실되므로 첫 번째 타이머를 지울 수 없습니다.

start() 메서드에서 setInterval() 호출 전에 다음 코드 줄을 넣기 만하면됩니다. 이처럼

if (this.graph) { this.stop(); } 

: 다른 답변으로

var Graph = { 
graph: null, 
start: function (i) { 
    if (this.graph) { this.stop(); } 
    this.graph = setInterval(function() { 
     $('#a').html(i++); 
    }, 1000); 
}, 
stop: function() { 
    window.clearInterval(this.graph); 
} 
}; 
$('#bt1').click(function(){ 
    Graph.start(1); 
}); 
$('#bt2').click(function(){ 
    Graph.stop(); 
}); 
$('#bt3').click(function(){ 
    Graph.start(1); 
}); 
$('#bt4').click(function(){ 
    Graph.stop(); 
});