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. 특정 타이머 함수를 종료시켜주는 함수 , 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 |