(3) Asynchronous JavaScript - 비동기 함수들의 예시

비동기 함수 복습 - setTimeout()

setTimeout(callback, delay);

 

setTimeout() 함수의 동작은 다음과 같다.

1. setTimeout() 이전에 있는 코드 실행
2. setTimeout() 함수 실행: delay 만큼 기다리는 타이머를 시작
3. setTimeout() 이후에 있는 코드 실행
4. delay가 지나면 callback 실행

자바스크립트에서 많이 사용되는

비동기 함수 4가지(setInterval,addEventListener,useEffect,get() 함수가 있다.

useEffect,get()를 제외한

어떤식으로 비동기적으로 작동하는지 확인해보자

---

setInterval() 함수

setInterval(callback, interval)

setTimeout() 함수와 비슷하며 시간 간격을 두고

콜백을 반복적으로 실행하며 interval 단위는 밀리초(ms)이다.

console.log('시작');

//setInterval(callback, interval)
setInterval(() => console.log('2초가 지났습니다'),2000);

console.log('끝');

callback은 interval이 지난 후 처음으로 실행되고

만약 콜백히 호출되는 것을 멈추고 싶다면 setInterval() 함수의 리턴값을 저장해놨다가

clearInterval()을 실행한다

console.log('시작');

const IntervalID = setInterval(() => console.log('2초가 지났습니다'),2000);

// 7초후에 setInterval() 해제
setTimeout(() => clearInterval(IntervalID), 7000)
console.log('끝');

" 2초가 지났습니다 " 를 2초마다 출력하지만

7초 후에 clearInterval() 함수가 setInterval() 함수를 해제함으로써

문구가 3번만 출력되는 것을 확인할 수 있다.

---

DOM addEventListener()

addEventListener()는 웹 페이지 요소에 상호작용이 있을 경우 실행할 함수를 등록한다.

자바스크립트에서 비동기 함수의 대표적인 예이며

특정 이벤트가 발생했을 때 실행될 코드를 등록하는데 사용된다.

이벤트가 발생하기 전까지는 아무 동작 하지 않고

발생할 경우  지정한 콜백 함수가 실행된다.

element.addEventListener(eventType, callback);

• element : 이벤트를 감지할 DOM 요소
• eventType: 감지할 이벤트의 유형 (click, kedown, mouseover 등)
• callback : 이벤트가 발생했을 떄 실행할 함수

다음은 버튼 클릭 이벤트가 발생했을 때 예시이다.

const btn = document.querySelector('.my-btn');
btn.addEventListener('click', () => console.log('button click'));
//...

 

첫 번째 줄에서 my-btn 클래스를 가진 요소를 찾아서 btn이라는 변수에 저장한다.

두 번째 줄은 btn에 클릭('click') 이벤트가 발생하면

() => console.log('button click') 콜백이 실행되도록 해준다.

btn.addEventListener() 아래에 있는 코드를 실행하다가

사용자가 btn 요소를 클릭하면 콜백이 실행되서 문구가 콘솔에 출력되는 것이다.

---

그 외에도 비동기 함수는 아니지만 비동적 작업을 수행하는

React useEffect() , 서버를 만들때 사용하는 Express의 get() 함수 등이 있지만

React와 백앤드쪽 관련된 사항이라 아직은 배울 단계가 아니므로

나중에 공부하고 천천히 글 올리겠다.