오늘은 자바스크립트의 Timer함수에 대해 소개할까 합니다.
먼저, 웹 개발을 하다보면 이런 상황이 발생할 수 있습니다.
1) 특정시간마다 특정함수를 실행하고 싶은 경우
2) 이벤트가 발생하면 특정함수를 지정한 시간 이후에 실행하고 싶은 경우
자바스크립트의 타이머 함수로는 setTimeout, setInterval이 있습니다.
setTimeout, setInterval은 각각 타이머함수로서 사용이 가능하지만 대표적인 특징이 있습니다.
먼저 테스트를 위해 간단한 html파일을 만들어 봤습니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html>
<head>
<title>TimerTest</title>
</head>
<body>
<button type="button" style="height:20px;width:100px" onClick=timeout()>setTimeOut</button>
<button type="button" style="height:20px;width:100px" onClick="interval()">setInterval</button>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
style="height:20px;width:100px"
- 버튼의 높이를 20px, 폭을 100px로 설정
onClinck="timeout()"
- 버튼이 클릭되었을 때 "timeout" 이라는 함수를 실행
|
1
2
3
4
5
6
|
function timeout(){
alert("timeout");
}
function interval(){
alert("interval");
}
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
timer.js를 만들어 위의 코드를 넣어주세요!
테스트를 위해 버튼을 눌러봅시다!
테스트를 위해 간단한 html파일을 만들어봤으니까 이제는 자바스크립트를 실행해봅시다.
먼저, setTimeout입니다.
1. setTimeout
- setTimeout은 정해진 시간 이후에 단 한번만 실행하게 됩니다.
형식
setTimeout(function() { 실행할 함수(이벤트) }, 시간(ms));
|
1
2
3
4
5
|
var i = 0;
function timeout(){
i++;
setTimeout(function() { console.log(i + " " + "timeout") }, 1000);
}
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
timeout() 함수가 실행되면 setTimeout()이 실행됩니다. 시간이 1초(1000ms)로 설정되있기 때문에
누를 때마다 한번씩 console로 출력이 됩니다.
결과
2.setInterval
setTimeout과 다르게 setInterval은 정해진 시간마다 반복하게 됩니다.
형식
setInterval(function() { 실행할 함수(이벤트) }, 시간(ms));
|
1
2
3
4
5
|
var k = 0;
function interval(){
k++;
setInterval(function() { console.log(k + " " + "timeout") }, 1000);
}
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
결과
결과를 보게 되면 계속 같은 숫자가 출력됩니다. setInterval은 setTimeout과는 다르게
function(){ } 안에 있는 이벤트가 정해진 시간마다 실행되기 때문에 계속해서 같은 console이 출력되게 됩니다.
하지만, setInterval을 종료시켜주는 함수가 없다면 setInterval은 계속해서 반복적으로 실행되게 됩니다.
setInterval을 종료시키는 함수가 바로, clearInterval()입니다!
3.clearInterval
- 타이머 함수를 멈춰주는 역할을 하게 됨
형식
clearInterval(타이머);
clearInterval을 사용하기 위해서는 타이머를 변수 형태로 선언해주어야 합니다.
clearInterval을 사용하기 위해서 html에 버튼 하나 추가해줍니다.
그리고 자바스크립트를 아주 조금 바꾸어줍니다.
|
1
2
3
4
5
6
7
8
|
var vinterval;
function interval(){
k++;
vinterval = setInterval(function() { console.log(k + " " + "timeout") }, 1000);
}
function clearint(){
clearInterval(vinterval);
}
http://colorscripter.com/info#e" target="_blank" style="color:#e5e5e5text-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
vinterval을 전역스코프로 지정해주고, interval이 실행되게 되면 vinterval을 타이머 변수로 선언합니다.
그리고 clearint가 실행되면 변수 vinterval을 지우게 됩니다.
? clearTimeout은 없나요?
→ 물론 clearTimeout도 존재합니다. 하지만 clearTimeout은 setTimeout을 멈춰주는 역할이므로
setTimeout이 실행되기 전에 clearTimeout이 실행되지 않으면 무효가 됩니다.
결국 반복적인 작업을 종료시키기 위해서는 clearInterval이 필요하게 됩니다.
댓글