타이머를 사용한 예

- JavaScript의 타이머를 이용하면 애니메이션을 작성할 수 있음.

 

* 타이머

- JavaScript는 일정 시간마다 처리를 반복하기 위한 타이머라는 기능이 있음.

- 타이머와 canvas를 이용하면 JavaScript로 애니메이션을 작성할 수 있음.

 

 

[타이머를 이용하기 위한 메서드]

 

1) setInterval() 메서드

- 처리의 완료와 관계없이 일정 간격마다 다른 처리를 반복함.

 

setInterval(처리 내용, times);

                        반복할 간격 : 시간의 단위는 밀리초(ms)

 

2) setTimeout() 메서드

- 이 메서드를 실행하면 일정 시간이 지난 후 다른 처리를 호출함.

 

setTimeout(처리 내용, times);

                         대기 시간 간격 : 시간의 단위는 밀리초(ms)

 

[타이머를 정지시키기 위한 메서드]

 

- 타이머를 정지시키려면 setTImeout() 메서드 (또는 setInterval() 메서드)의 반환 값을 구해 두고, 그것을 clearTimeout() 메서드(또는 clearInterval() 메서드)에 전달해야 함.

 

var timer = setTimeout(처리 내용, times);

...

clearTimeout(timer);

 

- 예)

 

// 1초마다 원이 옆으로 이동하는 프로그램
 
<script>
function draw () {
    var now = new Date();
    var sec = new.getSeconds();
    var canvas = document,getElementById("canvas1");
    if(canvas.getContext) {
        var cvs = canvas.getContext("2d");
        cvs.clearRect(0, 0, canvas.width, canvas.height);
        cvs.save();     
        cvs.beginPath();
        cvs.arc(sec*5, 150, 50, 0, Math.PI*2, true);    // 가로 위치는 초 수에 따라 바뀜.
        cvs.closePath();
        cvs.fillStyle="#666666";
        cvs.fill();
        cvs.restore();      // save() 메서드와 restore() 메서드를 사용하여 이 함수 안의 상태 변하가 다른 것에 영향을 주지 않도록 함.
        setTimeout("draw();", 1000);    // 1초 후에 자기 자신을 호출함.
    }
}
</script>

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)