2016-12-21 3 views
-1

setInterval을 호출하는 함수를 반복적으로 호출해야하는 경우가 있습니다. 내가 만난 문제는, 함수가 생성되면 (매 1 초마다) setInterval을 사용하여 설정되면; setInterval을 clearInterval없이 두 번 이상 호출하면 함수 자체를 계속 호출합니다. 예 : 나는 사이에 정지 시간을 클릭하지 않고 두 번 시작 시간 버튼을 클릭하면setInterval, clearInterval이 작동하지 않습니다.

<!DOCTYPE html> 
<html> 
<body> 

    <p>A script on this page starts this clock:</p> 

    <p id="demo"></p> 
    <button onclick="myStartFunction()">Start time</button> 
    <button onclick="myStopFunction()">Stop time</button> 

<script> 

var myVar; 
function myStartFunction(){ 
    myVar = setInterval(function(){ myTimer() }, 1000); 
} 

function myTimer() { 
var d = new Date(); 
var t = d.toLocaleTimeString(); 
document.getElementById("demo").innerHTML = t; 
} 

function myStopFunction() { 
    console.log(myVar); 
    clearInterval(myVar); 
    console.log(myVar); 
} 
</script> 

</body> 
</html> 

, 함수는 멈추지 않습니다. 이것은 시나리오의 예입니다. 어쨌든이 문제를 해결하려면?

+2

참으로 먼저 중지를 클릭하도록 사용자에게 요구하지 않고 시작 시간의 2 인스턴스를 발사 로직을하지 조정해야합니다. 그것은 컴퓨터입니다. 너는해야할 일을 말해 둬야한다. – zerohero

답변

4

startFunction에서 기존 간격을 지우십시오. 그렇지 않으면 여러 간격을 만들지 만 마지막에 간격의 참조 만 저장하면됩니다. 예를 들어

:

function myStartFunction(){ 
    if(myVar) { 
    myStopFunction(); 
    } 
    myVar = setInterval(function(){ myTimer() }, 1000); 
} 
+0

이런 식으로 일해 줘서 고마워 !! 나는 이것에 정말로 새로운 ... –

0

동일한 myVar를 반복해서 덮어 쓰고 있습니다 ... 즉, stop 함수는 마지막으로 시작된 타이머 만 중지합니다. 최대 하나의 setInteval 만 실행하려면 시작하기 전에 stop 함수에 대한 호출을 추가하십시오.

관련 문제