[41장, 42장] 타이머, 비동기 프로그래밍

[juyeon-park]

데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎

아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!

Q. 퀴즈 내용
1.  1번
2.  2번
3.  3번

<details>
<summary>퀴즈 정답</summary>
<div markdown="1">    
정답 설명
</div>
</details>

[suehdn]

Q. 아래 코드의 출력 결과를 예상해주세요.

function hi(){
    console.log('hi');
}
function nice(){
    console.log('nice to');
}
function meet(){
    console.log('meet you');
}

setTimeout(hi);
setTimeout(nice,1000);
meet();

퀴즈 정답

meet you
hi
nice to

setTimeout에 delay를 생략하면 기본값 0이 지정된다.
타이머 설정과 타이머가 만료되면 콜백 함수를 태스크 큐에 등록하는 처리는 브라우저가 실행하게 되는데 4ms 이하의 지연 시간인 경우 최소 지연시간 4ms가 설정되기 때문에 각 실행 시점은

setTimeout(hi); //4ms
setTimeout(nice,1000); //1000ms
meet();//0ms

[juyeon-park]

Q. debounce, throttle의 특징과 주로 사용되는 경우를 짝지어주세요

	특징	사용되는 경우
Debounce	(1)	(2)
Throttle	(3)	(4)

a. 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.
b. scroll 이벤트
c. resize 이벤트, 검색 자동완성
d. 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간 동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러가 한 번만 호출되도록 한다.

퀴즈 정답

1- d 2-c 3-a 4-b

[eeseung]

Q. 다음 코드에서 각 함수와 연관된 그림을 연결해 주세요.

const first = (callback, delay) => { // (1)
  let timerId;
  return event => {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(callback, delay, event);
  };
};

const second = (callback, delay) => { // (2)
  let timerId;
  return event => {
    if (timerId) return;
    timerId = setTimeout(() => {
      callback(event);
      timerId = null;
    }, delay, event);
  };
};

퀴즈 정답

(1) B - debounce, 짧은 시간 간격으로 이벤트 연속 발생 시 이벤트 핸들러를 호출하지 않다가 일정 시간 동안 이벤트가 발생하지 않으면 이벤트 핸들러를 한 번 호출한다.

(2) A - throttle, 짧은 시간 간격으로 연속 발생하는 이벤트를 그룹화해서 일정 시간 간격으로 이벤트 핸들러를 호출한다.

[jonghyunlee95]

Q. OX퀴즈

1. 함수가 호출되면 함수 실행 컨텍스트가 순차적으로 힙에 푸시되어 순차적으로 실행된다.
2. 힙은 객체가 저장되는 메모리 공간이다.
3. 콜 스택이 비어 있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동 시킨다.

퀴즈 정답

1. X - 함수가 호출되면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 2. O 3. O

[dudwns]

Q. 다음 질문에 답하시오.

1. setTimeout의 두 번째 인수(delay)를 생략하면 지정되는 값은 무엇인가?

2. 다음 타이머를 취소하는 코드를 작성하시오.

const timerId = setTimeout(() => console.log('팀 프로젝트 화이팅!', 2000);

(?) // 타이머 취소 코드

퀴즈 정답

1. 0
2. clearTimeout(timerId);