타이머 함수
타이머 함수는 일정시간마다 혹은 지정한 시간에 특정 함수를 실행할 수 있도록 하는 함수입니다.
타이머 함수의 경우 setTimeout()과 setInterval() 두 가지가 있고 각 함수에 맞는 타이머 취소 함수가 있습니다.
사실 타이머 함수는 Window객체의 메서드이므로 어디서나 사용 가능한 전역 함수입니다.
|
함수 |
매개변수 |
설명 |
|
setTimeout(Function, millisecond) |
Function - 특정 시간이 되면 실행시킬 함수
millisecond - 실행시킬 시간
지금 시점으로 몇 밀리초 후에 실행할 것인지를 지정하며 밀리초(1/1000) 단위입니다. |
일정 시간 후 지정한 함수를 한 번 실행합니다. |
|
serInterval(Function, millisecond) |
Function - 특정 시간이 되면 실행시킬 함수
millisecond - 실행 주기
몇 밀리초 마다 특정 함수를 실행할 것인지를 지정하며 밀리초(1/1000) 단위입니다. |
넘긴 시간을 주기로 매번 함수를 실행합니다. |
|
clearTimeout(참조값) |
참조값 - 중지시킬 타이머의 참조값
(setTimeout()을 실행시키고 return 받은 값) |
setTimeout()으로 지정한 타이머를 중지시킵니다. |
|
clearInterval(참조값) |
참조값 - 중시시킬 타이머의 참조값
setInterval()을 실행시키고 return 받은 값) |
setInterval()로 지정한 타이머를 중지시킵니다. |
setTimeout(Function, millisecond)
일정한 시간이 지나면 특정 함수를 한 번 실행할 수 있습니다.
다음은 1초 후 hello() 함수를 실행하는 코드입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<title>타이머</title>
<script>
var hello = function() {
alert("반가워요");
}
setTimeout(hello, 1000);
</script>
</head>
<body>
타이머 테스트 1초 후 실행
</body>
</html> |
cs |
결과 - 페이지가 로딩되고 1초 후 알림창이 나타납니다.
clearTimeout(참조값)
실행한 setTimeout를 취소시킵니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<script>
var hello = function() {
alert("반가워요");
}
//타이머를 걸고 해당 타이머에 대한 참조값을 timeout 변수에 저장
var timeout = setTimeout(hello, 1000);
//timeout 타이머를 취소시킴
clearTimeout(timeout);
</script> |
cs |
결과 - 페이지가 로딩되고 1초가 지나도 아무 반응도 일어나지 않습니다. 타이머가 취소 되었기 때문입니다.
serInterval(Function, millisecond)
일정 시간마다 특정 함수를 실행 시킵니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<head>
<meta charset="utf-8" />
<title>타이머</title>
<script>
var hello = function() {
alert("반가워요");
}
setInterval(hello, 1000);
</script>
</head>
<body>
타이머 테스트 1초마다 실행
</body>
</html> |
cs |
결과 - 1초마다 알림창이 뜹니다.(확인 버튼을 계속 눌러야 합니다)
clearInterval(참조값)
실행한 setInterval() 함수를 중지시킵니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<script>
var hello = function() {
alert("반가워요");
}
var interval = setInterval(hello, 1000);
//setTimeout을 통해 3초 후 setInterval()을 중지
setTimeout(function () {
clearInterval(interval);
}, 3000);
</script> |
cs |
결과 - 알림창이 1초마다 한번씩 3번까지 뜨다가 더이상 나타나지 않게 됩니다.
'JavaScript' 카테고리의 다른 글
| [자바스크립트] Number 객체 (0) | 2017.11.13 |
|---|---|
| [자바스크립트] Infinity 와 NaN (0) | 2017.11.13 |
| [자바스크립트] String 객체 (0) | 2017.11.12 |
| [jQuery] proxy 함수 (0) | 2017.11.12 |
| [자바스크립트] arguments 객체 (0) | 2017.11.12 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그