출처: http://coding-start.tistory.com/35
자바스크립트에서 타이머함수란 전역객체인 window 객체 안에 있는 함수들입니다. 그렇다면 타이머 함수가 할수 있는 일은 무엇이 있을까요?
1. 특정시간마다 특정 함수를 계속 호출해서 실행 시킬 수 있다. => setInterval(function, duration)
참고 http://gemuse.tistory.com/28
예제 : window.setInterval( function(){
scope.setColhead();
},1000);
2. 특정시간 이후에 딱 한번만 특정함수를 호출해 실행시킨다. => setTimeOut(function, duration)
예제 : setTimeout(function(){self.doSearch();},300);
참고 http://travelfacebook.tistory.com/2260
3. 특정 타이머 id값을 가진 타이머 함수를 종료시킨다. => clearInterval(timerid)
참고 http://egloos.zum.com/newkong/v/4088409
1. 특정시간마다 특정함수를 호출/실행, setInterval 함수
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#output {
width: 200px;
height: 200px;
border: 4px solid #000;
margin: 50px;
font-size: 100px;
text-align: center;
line-height: 200px;
vertical-align: middle;
}
</style>
<script src="../../libs/jquery-1.11.0.min.js"></script>
<script>
// 예제01: 1초에 한 번씩 변수 값을 1씩 증가시키고 이 값을 #output 영역에 출력해 주세요.
$(document).ready(function () {
var $output = $("#output");
var count = 0;
// 여기에 풀이를 입력해주세요.
// 함수 생성
function addCount() {
// 값 증가
count++;
// 값을 출력
$output.text(count);
}
addCount();
setInterval(addCount, 1000);
})
</script>
</head>
<body>
<div id="output">
0
</div>
</body>
</html>
|
cs |
이 코드는 1초 마다 숫자를 1씩 증가시켜주는 코드입니다. 딱히 어렵지 않은 코드라고 생각합니다. 여기서 하나 알아야 할 것은 setInterval 함수가 어떠한 리턴 값 없이 매개변수안에 있는 실행구문을 실행시켜주고 끝이 아닙니다. setInterval 함수는 코드내 유일한 timer id를 int 형태로 반환하는 함수입니다. (timer id값은 clearInterval 함수로 타이머 함수를 종료시킬 때 사용 될수 있는 유니크 키 값이라고 생각해도 좋습니다.)
2. 특정시간 이후에 딱 한번만 함수 호출/실행 , setTimeOunt 함수
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#output {
width: 600px;
height: 200px;
border: 4px solid #000;
margin: 50px;
text-align: center;
line-height: 200px;
vertical-align: middle;
}
</style>
<script src="../../libs/jquery-1.11.0.min.js"></script>
<script>
// 예제02: 3초 후에 “안녕하세요. 환영합니다.” 메시지를 화면에 출력해 주세요.
$(document).ready(function () {
var $output = $("#output");
// 여기에 풀이를 입력해주세요.
setTimeout(function () {
$output.text("안녕하세요. 환영합니다.")
}, 3000);
})
</script>
</head>
<body>
<div id="output">
</div>
</body>
</html>
|
cs |
3. 특정 타이머 함수를 종료시켜주는 함수 , clearInterval 함수
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#output {
width: 200px;
height: 200px;
border: 4px solid #000;
margin: 50px;
font-size: 100px;
text-align: center;
line-height: 200px;
vertical-align: middle;
}
</style>
<script src="../../libs/jquery-1.11.0.min.js"></script>
<script>
/*
예제 03: 1초에 한번씩 숫자 값 출력하기
변수 값을 1초에 한 번 1씩 증가시키고 이 값을 화면에 출력해 주세요.
단, 정지버튼(#stip)을 누르면 더 이상 실행되지 않게 타이머 함수를 중지시켜 주세요.
*/
$(document).ready(function() {
var $output = $("#output");
var count = 0;
var timerID=0;
timerID = setInterval(function() {
// 값 증가
count++;
// 값을 출력
$output.text(count);
}, 1000);
$("#stop").click(function() {
// 여기에 풀이를 입력해주세요.
clearInterval(timerID);
});
})
</script>
</head>
<body>
<button id="stop">멈춤</button>
<div id="output">
0
</div>
</body>
</html>
|
cs |
이 코드는 setInterval 함수에 의해서 1초마다 1씩 증가되는 값을 출력시켜주는 타이머 함수를 종료시켜주는 코드입니다. 여기에 쓰이는 함수가 clearInterval 함수입니다. 여기서 보이는 것은 setInterval 함수의 리턴 값을 timerID라는 변수에 담아주고 이 변수를 이용해 clearInterval 함수를 사용하여 특정타이머를 종료시켜줍니다.
1. setTimeout() 메소드 - 일정시간후 코드실행 > setTimeout(code, delay); code : 일정시간 후 실행시킬 자바스크립트 코드를 포함한 문자열(함수나 alert같은 코드들...)
delay : 문자열 code 내에 있는 자바스크립트 코드가 실행되기까지 걸리는 시간 (1/1000초 단위)
2. setInterval() 메소드 - 일정시간후 코드 반복실행 > setInterval(code, delay); setTimeout()과 같이 일정시간후에 코드가 실행되지만, 한번실행이 아닌 반복실행된다.
code : 일정시간 후 실행시킬 자바스크립트 코드를 포함한 문자열(함수나 alert같은 코드들...)
delay : 문자열 code 내에 있는 자바 크립트 코드가 실행되기까지 걸리는 시간 (1/1000초 단위)
3. clearInterval() 메소드 - clearInterval로 setInterval함수로 정해진 반복코드를 멈추게한다. > clearInterval("setInterval로 생성된 변수") code : 일정시간 후 실행시킬 자바스크립트 코드를 포함한 문자열(함수나 alert같은 코드들...)
delay : 문자열 code 내에 있는 자바스크립트 코드가 실행되기까지 걸리는 시간 (1/1000초 단위) ex) var intA = setInterval("clock()",50) // 0.05초마다 clock()함수를 실행한다.
clearInterval(intA) //setInterval()로 실행된 메소드를 취소한다.
[ JavaScript ] 일회용 타이머 setTimeout() 메소드
1. setTimeout(함수명, 시간) - '함수명'이라고 되어있는 부분에 일정 시간 뒤에 실행시키고 싶은 함수나 명령 따위를 넣는다. - 주의할 것은, function01() 이라는 함수를 사용한다 할때, setTimeout(function,
egloos.zum.com
[ JavaScript ] 일회용 타이머 setTimeout() 메소드
1. setTimeout(함수명, 시간) - '함수명'이라고 되어있는 부분에 일정 시간 뒤에 실행시키고 싶은 함수나 명령 따위를 넣는다. - 주의할 것은, function01() 이라는 함수를 사용한다 할때, setTimeout(function,
egloos.zum.com
'12 Javascript > 30 각종 함수' 카테고리의 다른 글
| 31 날자관련 두 날자사이에 시간을 계산한다 (0) | 2021.07.16 |
|---|---|
| 31 날자관련 날자계산 (0) | 2021.07.16 |
| 인코더(Encoder), Eval함수 ,숫자변환함수 (0) | 2021.07.15 |
| 31 날자관련 var d = new Date(); (0) | 2018.07.18 |
| 30 substring과 substr의 차이 (0) | 2013.01.18 |
