타이머 함수의 활용

  1. 특정 함수나 기능을 바로 실행하지 않고, 약간의 시간이 지난 후에 실행하고 싶을 때

    • 어떤 정보를 표시한 후, 몇 초 뒤에 다른 페이지로 이동

  2. 특정 함수를 지속적으로 반복 실행하고 싶을 때

    • 특정 시간마다 화면을 갱신하기 위해서 서버에 새로운 정보를 요청
    • 남은 로그인 유지 시간 표시

setInterval

setInterval(fn, delay);

일정시간 마다 함수를 실행

setInterval(function() {				// 1초마다 출력
	console.log('setInterval');
}, 1000);
setInterval(console.log('setInterval'), 1000);		// 1번만 출력

주의할 점은 함수 안의 내용을 반복적으로 수행하는 것(함수 자체를 반복해주지 않음)

  • setInterval은 timerId를 반환하므로, 이를 활용해서 clearInterval로 반복을 멈출 수 있음
  • timerId는 int 값

clearInterval로 반복 취소하기

const timerId = setInterval(function() {
	// 반복할 내용
}, 1000);
if (정지할 조건) clearInterval(timerId);

간혹 clearInterval이 작동하지 않는 경우가 있는데, 그럴 때는 넘겨준 타이머 값을 콘솔에 찍어서 일치하는지 확인해보자.

setTimeout

setTimeout(fn, delay);

일정시간 후 함수를 한 번만 실행

활용

setTimeout, setInterval 동시에 활용하기

const intervalId = setInterval(function() {
	// 수행할 내용
}, 1000);

setTimeout(function() {
	clearInterval(invervalId);
}, 50000);

setInterval로 반복실행하다가 정해진 시간 후에 clearInterval을 실행(setTimeout)해서 반복을 중지시킴