javascript로 타이머 구현하기

[javascript] javascript로 타이머 구현하기

자바스크립트로 타이머를 구현하려면 

setInterval 함수를 사용하면 된다. 

레퍼런스 : http://www.w3schools.com/jsref/met_win_setinterval.asp

Syntax

setInterval(function,milliseconds,param1,param2,...)

setInterval의 첫번째 파라미터는 정해진 시간마다 실행될 callback 함수이다. 함수를 선언한 후 해당 함수의 이름을 첫번째로 지정한다.

두 번째 파라미터는 특정 함수가 반복될 시간 설정이다. 밀리 세컨드 단위로 3초일 경우 3000을 입력하면 된다. 

나머지 param1, param2도 있는데 자주 사용하지 않는 파라미터다. 굳이 사용할 필요없다.

Parameter Values

Parameter	Description
function	Required. The function that will be executed
milliseconds	Required. The intervals (in milliseconds) on how often to execute the code
param1,param2,...	Optional. Additional parameters to pass to the function (Not supported in IE9 and earlier)

예제코드 

0.3초 단위로 setColor라는 함수를 실행한다. setColor 함수는 매초마다 현재 페이지의 배경 색상을 노랑, 핑크 색상으로 변경한다. 

함수 중지는 setInterval의 객체를 갖고 있는 myVar 변수를 clearInterval에 입력하여 실행하면 중지된다. 

var myVar = setInterval(function(){ setColor() }, 300);

function setColor() {
    var x = document.body;
    x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "pink" : "yellow";
}

function stopColor() {
    clearInterval(myVar);
}