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에 담아 사용한다.