본문 바로가기
JavaScript

[JavaScript] 타이머 API

by lvd-hy 2023. 3. 19.
반응형

setTimeout(function, delay, arg) : 일정 시간 후에 함수를 실행

// 예시 1 : callback를 사용하여 setTimeout 실행
// setTimeout (callback, millisecond)
setTimeout(function () {
  console.log('1초 후 실행');
}, 1000);
// 123 (임의의 타이머 ID)

// 예시 2 : callback 함수를 화살표함수 형태로 사용하여 setTimeout 실행
setTimeout( ()=> {
	console.log('1초 후 실행');
}, 1000);
// 17 (임의의 타이머 ID)

// 예시 3 : 함수명을 이용하여 setTimeout 실행
function timer() {
	console.log('1초 후 실행');
}
let timerLet = (setTimeout(timer, 1000));
// undefined

// 예시 4 : 함수와 인자를 이용하여 setTimeout함수를 실행
function result (name, age) {
	console.log (`이름은 ${name} 입니다.`);
	console.log (`나이은 ${age}살 입니다.`);
}
let timerlet = setTimeout(result, 1000, "김코딩", "23");
// undefined

clearTimeout(timeoutID) : setTimeout 타이머를 종료

const timer = setTimeout(function () {
  console.log('10초 후 실행'); // console에 출력되지않음(10초 후 실행할 것을 취소했기 때문)
}, 10000);
clearTimeout(timer);
// return 값: 없음
// setTimeout이 종료됨.

setInterval(function, delay, arg) : 일정 시간의 간격을 가지고 함수를 반복적으로 실행

// 예시 1 : callback를 사용하여 setTimeout 실행
// setTimeout (callback, millisecond)
setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
// 123 (임의의 타이머 ID)

clearInterval(intervalID) : setInterval 타이머를 종료

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// return 값: 없음
// setInterval이 종료됨.

❗ clearTimeout 이 setInterval 를 종료할 수 있고,clearInterval 이 setTimeout 를 종료할 수 있다.

단, 명확성과 혼란 방지를 위하여 아래와 같이 사용할 것
Timeout 끼리 사용 : setTimeout , clearTimeout
Interval 끼리 사용 : setInterval , clearInterval
반응형

댓글