코딩/jQuery

jQuery setInterval, clearInterval

모두와 함께 2020. 6. 30. 23:22

setInterval과 clearInterval에 대해 알아보겠습니다.

 

setInterval은 일정시간 후 이벤트가 실행되도록 하는 역할을, clearInterval은 이벤트를 종료시키는 역할입니다.

 

예제를 통해 알아보겠습니다.

<script>
    var timer = setInterval(function(){
    console.log("setInterval 1초마다 실행");
    }, 1000);
</script>

예제의 결과로 console.log에 1초마다 데이터가 생기는 것을 확인할 수 있습니다.

뒤에 숫자 1000은 밀리세컨드로, 1000은 1초를 의미합니다.

 

<script>
	$(document).ready(function(){
		$("#stop").click(function(){
			clearInterval(timer); 
		});
	});
</script>
<body> 
    <button id="stop">멈추기</button>
</body>

clearInterval의 모습입니다.

body에 멈추는 기능을 하는 버튼을 만들었고, script에서 버튼을 누르면(click) 멈추는 기능을 구현했습니다.