setTimeout, setinterval

tid=setTimeout(a,b)은 b초후에 a함수를 실행합니다. 이것은 1회만 실행하는거구요.
tid=setInterval(a,b)는 b초마다 a함수를 실행합니다. 이것은 무한루프가 되는거지요,

둘모두 실행후 중단할때에는 clearTimeout(tid) 와 clearInterval(tid) 로서
실행을 중단합니다.
tid는 setTimeout과 setInterval을 실행후에 리턴되는 타이머 ID구요,
이 타이머ID로서 타이머를 중단할 수 있는거지요.

[COLOR="Navy"]setTimeout을 이용한 반복문의 예제[/COLOR]

<script>
cnt=0;
function a(){
	if(cnt<10){
		cnt++;
		alert(cnt);
		tid=setTimeout(a,1000); //1초후 a함수 실행 - 재귀호출
	} else {
		clearTimeout(tid);
	}
}
a();
</script>

[COLOR="navy"]setInterval을 이용한 반복문의 예제[/COLOR]

<script>
cnt=0;
function a(){
	if(cnt<10){
		cnt++;
		alert(cnt);
	} else {
		clearInterval(tid);
	}
}
tid=setInterval(a,1000); //1초후 a함수 실행 - 재귀호출
</script>

----------------------------------------------------------------------
자바스크립트에서 setInterval을 사용 하셨다면 어떠한 이벤트를 만들어서 해제를 시켜야 합니다.

예를 들어
[COLOR="navy"]setInterval("ex()", 1000)[/COLOR]
이렇게 실행을 했다면 함수가 인터발 간격으로 실행 되는 것을 해제하기 위해 인터발 아이디를 변수로 만들어 줍니다.

[COLOR="navy"]testex = setInterval("ex()", 1000)[/COLOR]
이렇게 사용 할때 동일한 함수 내에서 사용시는 문제가 되지 않지만 버튼등을 이용해서 이벤트를 해제하려면 전역으로 두셔야 합니다.

해제 하는 방법은
[COLOR="navy"]<input type=button value="해 제" onClick="clearex()">[/COLOR]
위에 버튼을 누르면 clearex() 함수를 실행 시키고 그곳에

[COLOR="navy"]function clearex() {
clearInterval(testex)
}[/COLOR]
------------------------------------------------------------
시작버튼 누르면 초기화와 함께 다시 시작되도록 했습니다.
문자가 나타난 즉시 흐르는 시간을 보이도록 하고 문자가 사라지는 1초내에서만 시간을 측정하도록 했습니다.
테이블을 클릭하면 바로 흐른시간을 보여주도록 했습니다.
a가 나타나기 전이나 없어진 후에는 클릭해도 아무 반응 없도록 했습니다.
문자를 추가해도 이상없고 a문자를 더 추가해도 a문자에서는 똑같이 반응하게 했습니다.

<script>
var a = new Array("h", "o", "w", "a", "r", "e", "y", "o", "u");
var react="a";
var flag=0;
var tid=0;
var tid2=0;
var start=0;
var speed=0;

//1초에 한 번씩 flag값을 증가시키며 flag값을 이용해 각 문자를 순서대로 보여줌
//if(st) 구문은 초기화 시작
//if(view.innerText==react) 구문은 시작시간을 저장하고 타이머가 작동
function change(st) {
	if(st) {
		flag=0;
		clearTimeout(tid);
		msiv.innerText="";
	}
	view.innerText=a[flag++];
	if(view.innerText==react) {
		start=new Date();
		milli();
	}
	tid=setTimeout('change()',1000);
	if(a.length-1 < flag) clearTimeout(tid);
}

//타이머
//999미리초에 시작했고 끝이 200미리초라면
//현재에서 과거를 빼야하는데 음수가 발생하므로
//초단위까지 합해서 계산함
function milli() {
	now=new Date();
	nowval=now.getSeconds() * 1000 + now.getMilliseconds();
	startval=start.getSeconds() * 1000 + start.getMilliseconds();
	speed=nowval-startval;
	msiv.innerText=speed+" msec";
	tid2=setTimeout('milli()',10);
	if(speed >999) clearTimeout(tid2);
}

//테이블의 onClick 이벤트로 작동
//if구문에 의해 현재 문자가 react  값일 때만 타이머를 멈추고
//타이머에서 계산한 시간을 보여줌
function check() {
  if(view.innerText==react) {
    clearTimeout(tid2);
    alert(speed+" msec");
  }
}
</script>
<input type="button" value="시작" onClick="setTimeout('change(1)',1000)">
<br>시작 버튼을 누른 후 문자 a가 나타나면 사각형테이블 내부 아무곳이나 클릭해 주세요
<table border="1" width="100" height="100" onClick="check()">
	<tr>
		<td align="center">
			<font size="+6"><div id="view"></div></font>
		</td>
	</tr>
</table>
<div id="msiv"></div>

---------------------------------------------
a배열을 1초에 한번씩 보여줄 위치를 div로 미리 선언하고 시작버튼을 누르면 setInterval,innerText를 사용하여 배열요소를 순서대로 해당div에 보여주며 도중에 확인버튼이 눌리면 결과를 해당div에 보여주도록 만들었습니다.

1. 1초에 한번씩 함수를 호출 ( setInterval(함수명,1000) )
2. 응답시간의 측정 : 끝밀리초-시작밀리초 ( 시작시점의 new Date() - 끝시점의 new Date() )

※ Date객체를 마이너스(-)연산자로 연산하면 두 날짜의 차이가 밀리초로 계산되어 반환됩니다. Date객체의 밀리초를 보고 싶으면 .valueOf() 나 .getTime()을 사용하시면 됩니다.

<div id="msg" style="height:100;font-size:20"></div><!--폰트 및 영역의 크기를 미리 설정함-->
<input type="button" value="시작" onclick="mystart()"><!--setInterval를 이용하여 배열요소를 1초에 한문자씩 div에 보여줌-->
<input type="button" value="확인" onclick="mystop()"><!--setInterval로 설정된 메소드를 clear시킴-->
<script type="text/javascript">
var a=new Array("h", "o", "w", "a", "r", "e", "y", "o", "u");  //배열요소를 선언함
var start=stop=tid=idx=0;  //변수선언 및 초기화
function mystart() {  //시작버튼이 눌린 경우
	document.all.msg.innerText="";  //div영역을 비움
	if (tid>0) clearInterval(tid);  //더블액션인경우 interval호출 함수를 해제
	idx=0;  //배열순번 변수를 초기화
	tid=setInterval(setText,1000);  //1초(1000밀리초)에 한번씩 setText함수를 호출함
}
function mystop() {  //확인버튼이 눌린 경우
	stop = (new Date()).valueOf();  //버튼이 눌린시각을 stop변수에 담는다(.valueOf()는 생략 가능)
	clearInterval(tid);  //interval함수를 clear시킴
	myresult();  //결과출력 함수를 호출
}
function setText() {  //1초에 한번씩 호출되는 메소드
	if (idx<a.length) {  //배열의 길이가 idx변수보다 크면
		if (a[idx]=="a") {  //idx번째 배열요소가 "a"이면
			start=(new Date()).valueOf();  //start변수에 현재 시각을 담는다(.valueOf()는 생략 가능)
		}
		document.all.msg.innerText+=a[idx++];  //div영역에 idx번째 배열요소를 보여주고 idx를 1증가함
	} else {
		mystop();  //배열요소의 호출이 끝났으면 멈춤(결과출력함수를 호출하도록 하였음)
	}
}
function myresult() {  //결과출력 함수
	document.all.msg.innerHTML+="<hr>결과 : ";
	if (start>0) {  //"a"문자가 보여졌으면(start변수에 날짜가 담겨졌으면)
		document.all.msg.innerHTML+="<br>a문자가 나온이후로 <font color=red><b>"+(stop-start)+"</b></font>밀리초만에 확인버튼이 눌려졌습니다.";  //stop시각에서 start시각을 뺀다(결과는 밀리초임)
	} else {
		document.all.msg.innerHTML+="<br>a문자가 나오기 전입니다.";  //"a"문자가 보여지기전에 확인버튼이 눌린 경우 보여지는 메세지
	}
}
</script>