My Boundary As Much As I Experienced

JS) 호출 스케줄링 본문

FrontEnd/Javascript(Vanilla)

JS) 호출 스케줄링

Bumang 2023. 7. 20. 21:13

호출 스케줄링이란?

일정 시간이 지난 후 원하는 함수를 예약 실행할 수 있게 해주는 것

 

 

1. setTimeout (일정시간 이후에 함수 실행하기)

setTimeout(()=> {
	console.log("time!")
}, 1000)

기본형: setTimeout(함수, 밀리세컨드)
1초 이후 함수 실행

 

const setTime = setTimeout(()=>{
	console.log("time!")
}, 1000)

setTimeout은 변수에 담기만 해도 예정대로 실행된다.
왜 변수에 담기만 해도 실행되는지... (추가 조사 필요)

 

 

 

 

 

2. clearTimeout ( 셋타임아웃 예약 취소하기)

clearTimeout(setTime)

clearTimeout을 하려면 앞서 setTimeout을 변수 지정하여 활용해야 한다.
*setTime이라는 변수에 지정된 스케줄링을 취소하는 코드

 

divEl.addEventListener("click", clearTimeout(setTime))

보통 addEventListener에 담아 사용한다.

 

 

 

3. setInterval (일정 시간 마다 함수 반복 실행하기)

const intervals = setInterval(() => {
	console.log(new Date().getMinutes());
}, 1000)

기본형: setInterval(함수, 밀리세컨드)
1초 마다 주어진 함수를 재실행한다.

*시계같은 기능을 1초 단위로 계속 Date함수 재호출하여 구현할수도 있다.

 

 4. clearInterval(셋인터벌 반복 취소하기)

clearInterval(intervals)

기본형: setInterval 반복을 취소한다.

 

divEl.addEventListener("click", clearInterval(intervals))

이것도 보통 addEventListener에 담아 사용한다.