▶▷ 알아두면 좋은 것들
이번 글에서는 타이머를 가지고 이미지나 글을 담고 있는 배너를 일정 시간이 지난뒤에 계속해서 바꾸는 예제를 만들어 볼까합니다. image 태그에 대한 지식을 가지고 계셔야 예제를 이해할 수 있습니다.
우선 핵심기능인 setTimeout() 함수에 대해서 알아볼까요?
setTimeout() 함수는 두개의 인자를 사용하게 됩니다.
첫번째는 "실행할 메소드"로 일정한 시간이 흐른뒤에 우리가 실행하고자 하는 메소드(함수)를 인자로 넣습니다.
두번째는 "지연할 시간"으로 밀리초를 입력하게 됩니다. 밀리초는 천분의 일초를 의미 하기때문에,
5초를 지연하고 할 경우, 5000이라는 숫자를 넣어야합니다.
그리고 setTimeout() 함수는 특별한 식별자를 반환합니다. 이것은 다음 예제에서 설명토록 하겠습니다.
소스를 보기에 앞서서 확인해야 할 부분은 이겁니다.
setTimeout 함수는 뒷단, 즉 백그라운드에서 돌아가는 함수이기 때문에, 다른 메소드나 동작을 함에 있어서 어떠한 영향을 주지 않습니다. 추후에 다시 설명할테지만, 기억하도록 합시다.
한가지 더! 여기서 진보된 타이머가 존재하는데요, 다음글에서 다루겠습니다.
그렇다면 소스를 보면서 설명하도록 할게요 ^^
소스(Source)
소스다운
Doit.zip
이미지 파일 3개와 html파일 1개 총 4개의 파일이 존재합니다.
소스 사용방법은 모든 파일이 동일 경로내 즉 , 같은 폴더안에 존재해야 합니다.
그렇다면 이상없이 실행 가능할 것입니다.
<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 타이머</TITLE>
</HEAD>
<SCRIPT language="javaScript">
1. var timerID;
2. var arrImage=new Array();
arrImage[0]="num1.png";
arrImage[1]="num2.png";
arrImage[2]="num3.png";
function image_onclick(){
3. timerID=setTimeout("change_image()", 2000);
4. alert("배너를 시작합니다.");
}
5. function change_image(){
var newImageNum=Math.round(Math.random()*2);
while(true){
if(document.banner.src.indexOf(arrImage[newImageNum]) >= 0){
newImageNum=Math.round(Math.random()*2);
}else{
document.banner.src = arrImage[newImageNum];
break;
}
}
6. timerID=setTimeout("change_image()", 2000);
}
function stop_banner(){
7. alert("방금 정지한 타이머의 식별자(ID)는 "+timerID+"입니다.");
8. clearTimeout(timerID);
}
</SCRIPT>
<BODY>
setTimeout()을 이용한 예제입니다.<br>
이미지를 클릭하시면 2초뒤에 다음 이미지로 바뀌게 됩니다.<br>
<a href="javascript:image_onclick()" onfocus=this.blur();><image name=banner src="num1.png" width=400 border=0></a>
<input type=button value=중지 onclick=stop_banner()>
</BODY>
</HTML>
소스설명
1. setTimeout()을 담을 변수 선언
- 이후에 setTimeout()의 식별자를 담을 변수입니다.
전역변수로 선언함으로써, 이후에 clearTimeout()을 활용할 수 있습니다.
2. 이미지 배열 선언
- 이미지를 담고 있는 배열입니다. 따로 설명은 않겠고, 관련글 1번에 가시면 관련된 내용을 확인할 수 있습니다.
3. setTimeout()함수 선언
- setTimeout 함수 입니다.
첫번째 인자로 같은 문서내 change_image() 함수를 부르도록 했습니다.
두번째 인자는 2000 으로 2초뒤 실행됨을 의미합니다.
4. setTimeout()후 메시지 출력
- 배너를 시작한다는 알림 메시지 입니다.
소스를 실행시켜 보면 아시겠지만, 배너를 클릭함(시작)과 동시에 메시지가 뜨게 됩니다.
여기서 눈여겨 봐야 할 점이 이겁니다. 위에서 설정한 2초가 지나야 이 메시지가 나오는 것이 아니죠!?
이는 setTimeout() 함수가 백그라운드에서 돌아가기 때문이죠. 꼭 확인합시다.
5. 이미지 변환 부분
var newImageNum=Math.round(Math.random()*2);
while(true){
if(document.banner.src.indexOf(arrImage[newImageNum]) >= 0){
newImageNum=Math.round(Math.random()*2);
}else{
document.banner.src = arrImage[newImageNum];
break;
}
}
- 이미지를 불러오고 바꿔주는 메소드입니다. 관련글 1번을 참고하시면 되겠습니다.
6. 재귀 호출
- 첫번째 setTimeout 함수와 다른점은 change_image() 함수 내에서 다시 change_image()함수를 불러냈다는 점입니다.
핵심이라면 핵심일 수 있는 이부분은 재귀(Recursive) 함수의 형태로 나타낸건데요,
이로써 이미지를 바꾸는 change_image() 함수가 한번의 실행에 그치는 것이 아니라, 계속적으로 실행이 되도록 하였습니다.
재귀함수에 대해서는 다른 내용을 찾아보심이 좋을 것 같습니다.
7. setTimeout() 식별자 출력
- setTImeout() 함수는 특별한 식별자를 반환한다고 위에서 말씀드렸었는데요.
이부분에서 확인할 수 있습니다. 이렇게 값을 찍는 것을 보면 1, 2, 3 순서대로 식별자 값을 갖는다고 할 수 있습니다.
8. 타이머 정지
- 이 메소드가 어디에 연결되어 있는지 확인 가능하신가요? 네, 그렇습니다 ^^
중지 버튼에 연결되어 있는 함수 입니다. 그렇다면 다들
"아~ 이런 기능을 갖는 함수구나"
라고 하실텐데요 ^^. 맞습니다. 백그라운드에서 돌아가고 있는 setTimeout() 함수를 정지시키는 함수입니다.
여기서 들어가는 인자는 setTimeout()함수에서 반환한 식별자 값이구요.
그 식별자를 가지고 "중지"를 시킵니다.
