Javascript 타이머함수( setInterval(),setTimeOut(),clearInterval() )

2018. 6. 2. 12:34ㆍ프로그래밍언어/JavaScript

JavaScript 타이머 함수

자바스크립트에서 타이머함수란 전역객체인 window 객체 안에 있는 함수들입니다. 그렇다면 타이머 함수가 할수 있는 일은 무엇이 있을까요?


1. 특정시간마다 특정 함수를 계속 호출해서 실행 시킬 수 있다. => setInterval(function, duration)

2. 특정시간 이후에 딱 한번만 특정함수를 호출해 실행시킨다. => setTimeOut(function, duration)

3. 특정 타이머 id값을 가진 타이머 함수를 종료시킨다. => clearInterval(timerid)





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초 후에 매개변수 안에 있는 익명함수를 호출하여 "안녕하세요. 환영합니다"라는 메시지를 $("#output") 안에 출력하는 기능을 딱 한번만 실행시켜주는 코드입니다.




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 함수를 사용하여 특정타이머를 종료시켜줍니다. 






저작자표시

'프로그래밍언어 > JavaScript' 카테고리의 다른 글

Javascript - Uncaught Error: Bootstrap's JavaScript requires jQuery at...에러  (0) 2019.05.14
JSON객체의 배열로 넘어온 데이터 출력하기  (0) 2018.04.28
ajax_실시간 아이디 중복 체크 구현  (13) 2018.02.16

관련글

티스토리툴바