일정시간 간격으로 이미지 변환,전환 시키기 javascript setTimeout, setInterval, clearTimeout

 

 

일정시간 간격으로 이미지를 변환, 전환 시키는 javascript 코드입니다.


기본적으로 setTimeout() 함수를 사용하게 됩니다.
setTimeout() 함수는 아래와 같이 일정시간이 지나면 함수내에 기록된 동작이 일어나게 됩니다.


setTimeout(function(){ alert("Hello"); }, 3000);
 

두번째 인자로 기입된 3000(milliseconds)  즉, 3초가 지난후에 
alert("Hello"); 함수가 실행되는 방식입니다.


실행되는 함수를 외부에 작성한 후에 호출해도 됩니다.


var myVar;
function myFunction() {    myVar = setTimeout(alertFunc, 3000);}
function alertFunc() {    alert("Hello!");}

이때,  myVar = setTimeout(alertFunc, 3000); 와 같이 myVar 에 리턴값을 받아두는 이유는
setTimeout 적용을 취소하는 함수인 clearTimeout() 등에서 사용하기 위함입니다.



일정 간격으로 여러개의 이미지를 번갈아 가면서 보여주기

아래와 같이 하면 여러개의 이미지가 번갈아 가면서 보여질 것이라고 생각되지만,

맨 마지막 함수만 실행이 되는 등, 원하는 결과를 얻기가 힘듭니다.
 

 
<img id = "image_id" src = "image01.jpg">
 
 <script language = "javascript">
 
function ChangeImage(strImage) {
 
document.getElementById("image_id").src  = strImage;
 
}
 
setTimeout({ChangeImage('image01.jpg')}, 3000);
 
setTimeout({ChangeImage('image02.jpg')}, 3000);
 
setTimeout({ChangeImage('image03.jpg')}, 3000);
 
</script>

 

재귀함수(Recursive Function)을 이용하여 일정시간 간격으로 이미지 변환, 전환시키기


setTimeout() 함수를 여러번 이용해야 하는 경우, 확실하게 순서대로 처리되게 하려면

함수가 자기 자신을 호출하는 재귀함수(Recursive Function)를 사용하면 됩니다.

 

 

 

 
 
 
<img id = "image_id" src = "image01.jpg">
 
 <script language = "javascript">
 
 var obTimeOut; // clearTimeout() 함수를 이용하여 Timeout 을 취소하기위해 사용됨
 
 
 
var ObjectArray = new Array ();
 
ObjectArray[1] = "image01.jpg";
ObjectArray[2] = "image02.jpg";
ObjectArray[3] = "image03.jpg";
ObjectArray[4] = "image04.jpg";
ObjectArray[5] = "image05.jpg";
ObjectArray[6] = "image06.jpg";
 
var nObjectCnt = 0; 
 
function ShowDefaultRotate() // 스스로 자신을 호출하는 재귀함수 (Recursive Function)
{
 nObjectCnt++;
 
 if( nObjectCnt < ObjectArray.length )  // 배열의 갯수 이내일때만 실행
 {
 document.getElementById("img_id").src = ObjectArray[nObjectCnt];  
 obTimeOut = setTimeout("ShowDefaultRotate()",1000);  // 1초후에 자기자신을 호출 
 }
 else
 {
 clearTimeout(obTimeOut); // 배열의 갯수만큼 반복하여 변환시킨 후에는 Timeout 을 중지시킨다 
 } 
}
 
 
function startAnimation()
{
      obTimeOut = window.setTimeout(ShowDefaultRotate,100); // 윈도우 로드 후 0.1초 후에 반복함수를 호출합니다.
}
 
 window.onload = startAnimation; // 윈도우 로드시 이미지 변환함수 실행
 
</script>

 

만약, 1회반복이 아니라 무한대로 반복시키고자 한다면, 

nObjectCnt >= ObjectArray.length  이 조건이 완성될때 nObjectCnt 를 0으로 

초기화 하면 됩니다.