Java script - 7(2021.03.25) setInterval() clearInterval()

 

 

저번에 만든 이미지 슬라이드에서 버튼으로 setinterval을 켜고 끌 수 있게 하는 기능을 추가해봤다. 

 

<input type="button" onclick="onoffInterval()">

버튼을 만들고 

 

    isStop = true;
   
    function onoffInterval(){ 
        if(isStop==true){
            isStop=false; 
            x=setInterval(changelist,500);    
        }
        else{
            isStop=true;
            clearInterval(x);   
        }
    }

 boolean타입 변수와 함수를 만들었다.

 

 최초 isStop은 true다. 

 

버튼을 누르면 onoffInterval 함수가 실행된다. 

 

onoffInterval은 제일 먼저 if-else문을 통해 isStop이 true인지 false인지 검사한다. 

검사 결과 isStop은 true이기 때문에 if문 안의 내용이 실행된다.

우선 실행됐으니까 isStop을 false로 바꿔준다.  

그 다음 setInterval이 실행된다. 

 

그리고 또 버튼을 누르면 onoffInterval 함수가 실행된다. 

isStop은 false이기 때문에 else문 안의 내용이 실행된다. 

또 실행됐으니까 다시 isStop을 true로 바꿔주고. 

그 다음 clearInterval이 실행된다. 

 

이게 반복된다.