자바스크립트, 제이쿼리에서 사용하는 타이머 함수 setTimeout(), setInterval(), clearTimeout(), clearInterval()

 원하는 시간 후에 알람을 해주는 타이머도 구현이 가능하고, 호출을 원하지 않을때에도 타이머를 통해 그 기능을 제거 할 수도 있다. 한번의 호출만을 할 수 도, 지정한 시간마다 호출할수도 있다.

 

setTimeout()과 clearTimeout()

 

setTimeout(callback, delay)

 callback에는 함수가, delay에는 시간이 들어간다.delay에는 1/1000초 단위를 쓰며, 해당 시간 뒤에 매개변수 callback 함수가 호출된다. 예를들어

setTimeout(function(){ 
alert(‎'1초 후 호출 된다.'); 
}, 1000); 

위 코드를 실행하면 1초 후 alert(‎)함수가 호출 된다. 이때 setTimeout() 함수는 고유의 index 값을 반환해주며, 함수를 생성할때 마다 1씩 증가한다. 

clearTimeout(timerId)

 위에서 함수가 생성될 때마다 index값을 반환한다고 했다. clearTimeout()은 함수의 매개변수인 timerId와 일치하는 값, 즉 일치하는 index값을 갖고있는 setTimeout()함수가 호출 되지 않도록 해주는 함수이다.

var timerId = setTimeout(function(){ 
alrert('1초 후 호출 된다.'); 
}, 1000); 

clearTimeout(timerId); 

아무일도 일어나지 않는다. 마찬가지로 

var timerId = setTimeout(function(){ 
    alert('3초 뒤에 호출됩니다.'); 
}, 3000); 

var timerId2 = setTimeout(function(){ 
    alert('5초 뒤에 호출됩니다.'); 
}, 5000); 


clearTimeout(1); 

첫번째 함수는 호출되지 않는다.

 

 

setInterval()과 clearInterval()

 

setInterval(callback, delay)

delay에 설정한 시간마다 callback함수를 호출하는 함수다. 이때도 위와 마찬가지로 setInterval() 함수를 생성할 때마다 1씩 증가하게 되는 고유 index값을 반환한다.

setInterval(function(){ 
alert('3초 마다 호출합니다.'); 
}, 3000); 

3초마다 콜백함수가 호출되어 alert()가 실행된다.

 

 

clearInterval(timerId)

timerId와 일치하는 인덱스 값을 갖는 setInterval() 함수가 호출되지 않도록 한다.

var intervalId = setInterval(function(){ 
alert('3초 마다 호출합니다.'); 
}, 3000); 

clearInterval(intervalId); 

인덱스값 1이 반환되어 intervalId에 할당된다. clearInterval()함수의 인자값으로 넘겨주어 3초가 지나도 alert은 호출되지 않는다.