[Javascript] setTimeout, setInterval

1. setTimeout() 사용법

🔔 코드를 바로 실행하지 않고 일정 시간 기다린 후 실행해야하는 경우 사용한다.

첫번째 인자 : 실행할 코드를 담고 있는 함수
두번째 인자 : 지연 시간을 밀리초(ms) 단위
세번째 인자~ : 첫번째 인자로 넘어온 함수가 인자를 받는 경우 이 함수에 넘길 인자

setTimeout(() => console.log("2초 후에 실행됨"), 2000);
-> 2초 후에 실행된다.

function add(x, y) {
  console.log(x + y);
}
setTimeout(add, 2000, 3, 4);
//7

🔔 타임아웃 아이디와 clearTimeout()

setTimeout() 함수는 타임아웃 아이디라고 불리는 숫자를 반환한다.
타임아웃 아이디는 setTimeout() 함수를 호출할 때마다 내부적으로 생성되는 타이머 객체를 가리킨다,
이 값을 인자로 clearTimeout() 함수를 호출하면 기다렸다가 실행될 코드를 취소할 수 있다.

const timeoutId = setTimeout(() => console.log("5초 후에 실행됨"), 5000);
clearTimeout(timeoutId);
// 아무 것도 출력 안 됨

2. setInterval() 사용법

🔔 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용한다.

첫번째 인자 : 실행할 코드를 담고 있는 함수
두번째 인자 : 지연 시간을 밀리초(ms) 단위
세번째 인자~ : 첫번째 인자로 넘어온 함수가 인자를 받는 경우 이 함수에 넘길 인자

setInterval(() => console.log(new Date()), 2000);
Sun Dec 12 2021 12:29:06 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:08 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:10 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:12 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:14 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:16 GMT-0500 (Eastern Standard Time)
Sun Dec 12 2021 12:29:18 GMT-0500 (Eastern Standard Time)

 let count = 0;
setInterval(() => console.log(++count), 2000);
1
2
3
4
5
6
7
8
9
10

🔔 인터벌 아이디와 clearTimeout()

setInterval()은 인터벌 아이디라고 불리는 숫자를 반환한다.
setInterval() 함수를 호출할 때 마다 내부적으로 생성되는 타이머 객체를 가리키고 있다. 이 값을 인자로 clearInterval() 함수를 호출하면 코드가 주기적으로 실행되는 것을 중단시킬 수 있다.

> const intervalId = setInterval(() => console.log(new Date()), 2000);
< Sun Dec 12 2021 12:45:31 GMT-0500 (Eastern Standard Time)
< Sun Dec 12 2021 12:45:33 GMT-0500 (Eastern Standard Time)
< Sun Dec 12 2021 12:45:35 GMT-0500 (Eastern Standard Time)
> clearInterval(intervalId);`
``


출처 : https://www.daleseo.com/js-timer/