자바스크립트 타이머 함수

자바스크립트 타이머 함수

타이머 함수는 일정한 시간마다 특정 구문을 실행하고자 할 때 사용하는 기능이다. 타이머 함수는 3가지 주요 함수가 있습니다. 타이머 함수는 모든 전역 객체인 window에 있습니다. 

이름	설명
setInterval()	일정 시간마다 주기적으로 특정 구문을 실행하는 기능
setTimeOut()	일정 시간이 지난 후 특정 구문을 딱 한번 실행하는 기능
clearInterval()	실행 중인 타이머 함수를 멈추는 기능

---

setInterval() 일정 시간마다 주기적으로 특정 구문 실행

아래 코드 중에 마지막 3번째 setInterval 예제(add함수에 파라미터 전달)를 보시면 파라미터를 전달할 때 콜백으로 집어넣은 함수에 파라미터를 전달하는게 아니라 setInterval함수의 인자로 추가하는 것을 유의하면 됩니다.

//익명함수로 실행
var count = 0;
setInterval(function() {
    count++;

    console.log(count);
}, 1000);

//익명함수 대신 add함수를 만들어 파라미터로 추가
var count1 = 0;
function add() {
    count1++;

    console.log(count);
}

setInterval(add, 1000);

//add함수에 파라미터 전달
var count2 = 0;
function add(name) {
    count2++;

    console.log(name + " : " + count2);
}

setInterval(add, 1000, 'ktko');

---

setTimeOut() 일정 시간이 지난 후 특정 구문을 딱 한번 실행

마지막 3번째 setTimeout 예제를 보시면 파라미터를 전달할 때 콜백으로 집어넣은 함수에 파라미터를 전달하는게 아니라 setTimeout함수의 인자로 추가하는 것을 유의하면 됩니다.

setTimeout(function() {
    console.log("Hello Javascript");
}, 1000);

function hello() {
    console.log('Hello Function hello');
}

setTimeout(hello, 2000);

function name(greet, name) {
    console.log(greet + " " + name);
}

setTimeout(name, 3000, 'hello', 'ktko');

---

clearInterval() 실행 중인 타이머 함수를 멈춘다

setInterval() 함수와 setTimeout()함수를 이용해 생성한 타이머는 clearInterval()함수를 이용해 멈출 수가 있습니다.

setInterval()과 setTimeout함수의 반환 값을 clearInterval() 함수의 인자로 실행하면 타이머 함수를 멈출 수가 있습니다. 아래 예제는 1초마다 console.log로 카운트를 찍지만 3까지만 출력이 됩니다.

var count = 0;
var timerID = setInterval(function() {
    console.log(++count);
}, 1000);

setTimeout(function() {
    clearInterval(timerID);
}, 4000)

결과

1
2
3