[javascript] setTimeout, setInterval 스케줄링 함수

 
안녕하세요 !
오늘은 javascript 스케줄링 함수에 대해
알아보겠습니다. 😇
 
 
일정 시간이 지난 후에 원하는 함수를
예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call) 이라고 합니다.
호출 스케줄링을 구현하는 방법은
🌟✌🏻두 가지가 있습니다. ✌🏻🌟



 

---

( * 두 함수 모두 콜백 함수를 넘겨받아 실행합니다. )
 
1. setTimeout :
지정된 시간이 경과한 후에 한 번 콜백 함수를 실행.

2. setInterval :
지정된 시간 간격마다 콜백 함수를 반복적으로 실행.

---

 
 
 
 
 
setTimeout 함수부터 먼저 살펴봅시다.
 

 
 위 코드와 같이 setTimeout은 인수로 (실행할 함수, 지연시간, ...args) 를 받습니다.
 

🐟🌀
 
[ setTimeout의 인수 ]
 
1. 실행할 함수 - setTimeout에 특정 함수를 넘겨주고, 일정 시간이 지난 후 그 함수를 다시 호출하고 있으므로 이 함수는 callback 함수라 볼 수 있겠네요. 그러나 이러한 callback 함수 형태에서 주의할 점은, 함수를 넘길 때 함수 뒤에 ()을 붙이지 않아야 한다는 것입니다. ()을 붙이면 함수의 실행결과가 넘어가기 때문입니다. 

2. 지연시간 -  setTimeout이 넘겨받은 함수를 실행하기 위한 대기 시간으로, 단위는 밀리초(1000밀리초=1초)이며 기본값은 0입니다.

3. ...args - 위 코드 두 번째 예시처럼 함수에 전달할 인수가 있을 경우 작성합니다.
 
 

---

 
 
* 중요 : callback함수를 작성할 때는 가급적 화살표 함수를 사용하도록 합시다. 그래야 this 바인딩 문제에서 자유로울 수 있기 때문인데요, 쉽게 말하자면  일반적인 함수의 경우 호출되었을 때의 this 변수가 전역 객체(window)를 가리키게 되지만 화살표 함수의 경우 자신만의 this 바인딩을 생성하지 않고 외부 스코프의 this값을 그대로 가져다 사용하기 때문입니다.

---

 [javascript] 화살표 함수를 사용하는 이유 - https://with-mimi.tistory.com/m/entry/javascript-%ED%99%94%EC%82%B4%ED%91%9C-%ED%95%A8%EC%88%98%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

[javascript] 화살표 함수를 사용하는 이유

---

 
위 코드는 화살표함수를 사용함으로써 this가 외부 스코프(Counter)의 값을 가리킬 수 있게 합니다. 
 

---

 
 
 
다음으로  setInterval 함수를 살펴봅시다.  
 

setInterval 함수는 setTimeout과 동일한 문법을 사용합니다. 앞서 살펴본 setTimeout과 마찬가지로 인수로 (실행할 함수, 지연시간, ...args) 를 받습니다. 다만 setTimeout은 함수를 단 한번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만들어 주죠. 아래 사진을 봅시다.
 

 
alarm 함수를 실행시켜 보았더니, 콘솔 창 보이시나요? 3초에 한번씩 해당 문장이 반복적으로 실행되고 있습니다. 실행 시간으로부터 delay 시간이 지났을 때 딱 한번 콜백함수를 실행시키는 setTimeout과는 확연히 다른 모습입니다.
 
 

---

 
 
 
* 스케줄링 함수를 취소하려면 ? 🙅🏻‍♀️
 
 
setTimeout 함수와 setInterval 함수는 모두 timeID를 반환합니다. timeID란 예약된 작업에 대한 고유 식별자인데요, 이를 통해 스케줄링 작업을 취소할 수 있습니다. clearTimeout과 clearInterval을 사용해서 말이죠 ! 아래 코드를 봅시다.
 

 
변수 tid에 setTimeout로부터 반환받은 값이 담겼습니다. 이 tid 변수를 clearTimeout에 넘겨주면 3초 후 이름을 출력해주던 작업이 완전히 종료됩니다. setInterval도 마찬가지로 진행해주시면 됩니다. 특히 interval의 경우 종료시키지 않으면 무한으로 반복되므로 clear시키는 것이 더더욱 필수적이겠습니다. 그러나 그 어떤 작은 스케줄링 함수라도 메모리 누수 방지를 위해 항상 취소하는 습관을 들이도록 합시다.


 
 

 
위 코드와 같이 조건을 걸어서 clear 시점을 지정할 수도 있습니다. 5초까지만 접속 시간을 알려주고 그 이후에는 시간을 알려주는 작업을 종료시키는 코드입니다. 😮
 
 

---

 
 
 
 
* 대기 시간이 0인 setTimeout 함수 활용하기 !
 
기본적으로 스케줄링 함수는 현재 스크립트에 있는 다른 코드들이 모두 실행된 후에 실행됩니다. 설령 setTimeout함수의 대기시간이 0이라도 말이에요. 하지만 이를 역이용하면 "현재 스크립트의 실행이 완료된 후 가능한 한 빠르게" 원하는 함수를 호출할 수 있답니다.

 

 
호출 순서로만 보면 분명 sleep함수를 먼저 호출했지만, alarm함수가 먼저 호출됩니다. alarm 함수가 실행된 후 곧바로 뒤따라 sleep함수가 이어서 실행됩니다. 진짜 일어나자고 마음먹자마자 더 자려고 눕는 제 아침을 생각하며 짜 봤습니다~ ..
 

---

 
 
 
* 중첩된 setTimeout 함수 이용하기
 
setTimeout 함수를 중첩하면 setInterval과 같이 주기적으로 함수를 실행할 수 있게 됩니다. 그런데 주기적으로 반복해주는 역할인 setInterval 함수가 이미 있는데 왜 굳이 setTimeout함수를 중첩해서 사용한다는 걸까요?
 

---

 
1. 지연 간격 보장 ☝🏻

- 중첩 setTimeout을 사용하면 지연 간격을 보장하지만 setInterval은 이를 보장하지 않습니다.
 
 
앞서 살펴본 setInterval 함수는 특정 함수의 작업을 일정 시간마다 반복적으로 실행한다고 말씀 드렸는데요, 엄밀하게 따지면 "일정 시간 간격"이라는 개념이 모호합니다. 왜냐면 setInterval은 <특정 함수를 실행하는 데 소모되는 시간> 도 지연 간격에 포함시키기 때문에, 엄밀히 따지면 함수와 함수 사이의 지연 간격은 실제 명시한 간격보다 짧아지거든요. 
 
그러나 중첩 setTimeout을 사용하면 명시한 지연시간이 쭉 그대로 보장됩니다 ! setTimeout은 특정 함수를 완전히 종료 후 새로운 함수를 호출할 계획이 준비되기 때문이에요.
 

---

 
2. 유연하게 주기를 지정할 수 있다. ✌🏻
 

5초 간격으로 특정 회사에 어떤 작업을 요청하다가, 만약 회사가 과부하로 인해 5초 이내로의 작업 완료가 어렵게 되었을 경우 중첩 setTimeout을 사용하면 유동적으로 작업 요청 간격을 10초, 20초 등으로 늘려 재지정할 수 있게 됩니다.
 

 

---

 




스케줄링 함수가 필연적으로 쓰이는 비동기 처리 포스팅 보러가기 ⬇️⬇️⬇️⬇️⬇️

[javascript] 비동기 처리(callback, Promise) - https://with-mimi.tistory.com/m/entry/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%ACcallback-Promise

[javascript] 비동기 처리(callback, Promise)

---

오늘은 스케줄링 함수 setTimeout, setInterval에 대해
함께 알아보았습니다. 오늘도 읽어주셔서 감사합니다!
도움이 되셨다면 조아요 부탁드립니다..!! 🥹🙏🏻

---