[javascript]타이머(timer)함수의 의미와 활용

원주남자
포로그래밍/jQuery
2020. 12. 11.

자바스크립트의 타이머 함수에 대해서 알아보겠습니다.

여기에서 먼저 3가지 주요 function을 알아보겠습니다.

순번	선언	의미
1.	setInterval()	일정 시간간격으로 특정 코드 실행
2.	setTimeout()	일정 시간이 지난후 특정 코드를 딱 1번 실행
3.	clearInterval()	실행중인 타이머(timer)함수를 정지

이렇게 3가지가 있는데요 실제 활용 예를 보겠습니다.

먼저 첫번째로 순번 1(setInterval())과 3(cearInterval())을 사용하여 간단한 초시계를 만들어보겠습니다.

시작, 중지, 초기화(0부터 다시시작)을 하는 버튼을 만들어주고 해당 초과 디스플레이되는 span태그도 하나 만들겠습니다.

<!doctype html>
<html lang="ko">
 <head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta charset="UTF-8">
<title>Title</title>
<style>
.span_comm{
	font-size: 20px;
    font-weight: bold;
    margin-left: 11px;
}
</style>
<script>
$(document).ready(function() {

});
</script>

</head>
 <body>
  <input type="button" id="btn_start" value="시작">
  <input type="button" id="btn_pause" value="중지">
  <input type="button" id="btn_clear" value="초기화">
  <br>
  <span class="span_comm">초 : </span><span class="span_comm" id="span_sec">0</span>
 </body>
</html>

각 버튼에 onclick을 통해서 실제 활용 이벤트를 만들어보겠습니다.

<!doctype html>
<html lang="ko">
 <head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta charset="UTF-8">
<title>Title</title>
<style>
.span_comm{
	font-size: 20px;
    font-weight: bold;
    margin-left: 11px;
}
</style>
<script>

$(document).ready(function() {
	var timer;
	//시작
	$('#btn_start').click(function(){
		timer = setInterval(function(){
		var timer_sec  = Number($("#span_sec").text());
		$("#span_sec").text(timer_sec+1);
		},1000);
	});

	//중지
	$('#btn_pause').click(function(){
		clearInterval(timer);
	});

	//초기화
	$('#btn_clear').click(function(){
		$("#span_sec").text(0);
	});
});
</script>

</head>
 <body>
  <input type="button" id="btn_start" value="시작">
  <input type="button" id="btn_pause" value="중지">
  <input type="button" id="btn_clear" value="초기화">
  <br>
  <span class="span_comm">초 : </span><span class="span_comm" id="span_sec">0</span>
 </body>
</html>

위 이미지를 보시면 정상적으로 초시계가 1초마다 동작하는 것을 볼 수가 있습니다ㅎㅎ

위 소스상에 제가 봤을 때 유의해야하는 내용은 3개정도이지 않을까싶습니다.

1. timer을 전역변수로 사용하여 다른 버튼에서도 접근가능하게 하였다.

2. span태그의 값은 문자열로 인식되기 때문에 Number()를 통해서 숫자형 변수로 형변환

3. setInterval(실행구문, 간격미리세컨드)라는 것 입니다. (1000 = 1초)

마지막 2번째로는 setTimeout()을 통해서 딱 한번 실행되는 함수를 만들어보겠습니다.

setTimeout도 setInterval과 동일하게 setTimeout(실행구문, 간격미리세컨드)의 구조를 가지고 있습니다.

<!doctype html>
<html lang="ko">
 <head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta charset="UTF-8">
<title>Title</title>
<style>
.span_comm{
	font-size: 20px;
    font-weight: bold;
    margin-left: 11px;
}
</style>
<script>

$(document).ready(function() {
	var timer;
	timer = setTimeout(function(){
	var timer_sec  = Number($("#span_sec").text());
	$("#span_sec").text(timer_sec+1);
	},1000);
});
</script>

</head>
 <body>
  <span class="span_comm">초 : </span><span class="span_comm" id="span_sec">0</span>
 </body>
</html>

위 예제는 버튼 없이 화면이 준비됨가 동시에 1초뒤에 0에서 1로 넘어가고 정지됩니다.

저작자표시 비영리 변경금지

'포로그래밍 > jQuery' 카테고리의 다른 글

[jQuery] JSON데이터를 활용한 table만들기 (0)	2020.12.10
[jQuery] 이벤트 사용시 $(this)의미와 활용 (0)	2020.12.08
[Jquery] Each()함수를 사용한 li값 가져오기 (0)	2020.12.03
[Javascript] 배열(Array)선언, 추가, 삭제, 관리방법 (0)	2020.11.29
[jQuery]CSS, 스타일 적용하기(width, height, display등등) (0)	2019.07.10

원주남자