'setInterval', 타이머를 사용하자! ==setTimeout

by 조쉬 posted Feb 03, 2015
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄

▶▷ 알아두면 좋은 것들

 

setInterval("실행할 메소드", 지연할 시간);

 

 setInterval() 함수에 대해서는 길게 설명하지 않을려고 해요.

모든 설명은 앞글 -관련글 4번째-의 setTimeout() 과 동일합니다.

다만 다른점은 setTImeout()은 한번의 실행에 그치는데 반해서, 그래서 계속적인 동작을 주기위해 재귀문-Recursive-를 썼었죠?,

setInterval은 인자로 들어간 시간만큼 계속해서 반복 하게 됩니다.

 

 이때 중지하는 방법은 clearInterval()을 통해서 중지하든지 페이지를 나가야 합니다.

이것만 제외하면 모든 사용방법과 동작방법은 setTimeout(), clearTimeout() 과 동일합니다.

 

 


꼭, 관련글 4번째를 읽어보시길 권유합니다. 


 


소스(Source)

소스는 따로 첨부하지 않습니다.

 

이미지 파일 3개와 html파일 1개 총 4개의 파일이 존재합니다.

소스 사용방법은 모든 파일이 동일 경로내 즉 , 같은 폴더안에 존재해야 합니다.

그렇다면 이상없이 실행 가능할 것입니다.

<HTML>
<HEAD>
<TITLE>자바스크립트를 활용한 타이머 2</TITLE>
</HEAD>
<SCRIPT language="javaScript">
 var timerID;
 var arrImage=new Array();
 arrImage[0]="num1.png";
 arrImage[1]="num2.png";
 arrImage[2]="num3.png";

 function image_onclick(){
 1.     timerID=setInterval("change_image()", 2000);
      alert("배너를 시작합니다.");
 }
 
 2. 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;
           }
      }
 }
 
 function stop_banner(){
      alert("방금 정지한 타이머의 식별자(ID)는 "+timerID+"입니다.");
 3.   clearInterval(timerID);
 }
</SCRIPT>
<BODY>
 setTimeout()을 이용한 예제입니다.<br>
 이미지를 클릭하시면 2초뒤에 다음 이미지로 바뀌게 됩니다.<br>
 <a href="javascript:image_onclick()" onfocus=this.blur()><image name=banner src="num1.png" width=200 border=0></a>
 <input type=button value=중지 onclick=stop_banner()>
</BODY>
</HTML>


소스설명

1.3. setTimeout()과 clearInterval()

timerID=setInterval("change_image()", 2000);

clearInterval(timerID);

- setInterval() 함수와 clearInterval()을 사용했습니다. 이전 글과 동일합니다.

 

2. 이미지 배열 선언

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;
         }
    }
}

- 이전 글과 다른 점은 재귀문 부분이 필요없기 때문에, 생략했습니다.  동일합니다.