[JavaScript/jQuery] 반복동작을 위한 setInterval, clearInterval

자바스크립트를 이용하여 반복동작 하는 방법!

setInterval(), clearInterval() 함수를 사용하면 반복동작을 쉽게 할 수 있습니다.

setInterval() 함수를 통해 반복 동작을 할 함수를 등록 하시면 되고요.

clearInterval() 함수를 통해 등록했던 함수를 해제 할 수 있습니다.

전에는 setTimeout() 함수를 사용해서 만들었었는데...

이렇게 간단한 함수가 있는 줄 몰랐네요 ㅠㅠ...

이 함수를 알게 된 뒤 여태 삽질(?)을 한건가 싶네요 ㅋㅋㅋ

사용방법은 아주 간단한데요~

setInterval(function(){ // 동작할 코드 }); 

이렇게 사용하시면 됩니다.

아래는 예제 소스입니다.

저는 버튼을 생성하여 반복동작을 실행/정지 할 수 있도록 해보았는데요.

소스 보시고 참고하여 응용 하실 수 있을 듯 하네요!

백문이 불여일견 이론 길게 쓰는 것 보다는 한 번 따라해 보시는 게 쉬울 것 같아요~

1. css/style

<style type="text/css">

.toggle{

width:200px;

height:200px;

background:red;

text-align: center;

line-height: 200px;

font-size: 70px;

}

</style>

2. javascript

<script type="text/javascript">

var toggle = false;

var handle = null;

window.onload = function(){

startInterval();

}

function startInterval(){

if(handle==null){

handle=setInterval(function(){

toggleBg();

}, 500);

}else{

alert('실행중');

}

}

function stopInterval(){

clearInterval(handle);

handle=null;

}

function toggleBg(){

if(toggle){

var div = document.getElementById('toggle');

div.style.background='red';

}else{

var div = document.getElementById('toggle');

div.style.background='#fff100';

}

toggle = !toggle;

}

</script>

3. html

<p>

<input type="button" value="start" onclick="startInterval();"/>

<input type="button" value="stop" onClick="stopInterval();"/>

</p>

<div class="toggle" id="toggle">

뿅

</div>

4.result

뿅