[자바스크립트 문제집] 동기/비동기 처리

---

동기 처리 / 비동기 처리

동기처리 함수를 그대로 수행

// 동기처리 함수를 그대로 수행하는 `printImmediately()` 함수
function printImmediately(print) {
  print();
}

//동기처리
printImmediately(() => console.log('hello'));

 

특정 시간 이후에 비동기처리 콜백을 보내는 함수

//비동기 처리 Asynchronous callback
function printWithDelay(print, timeout) {
  // setTimeout을 이용해서 비동기 처리 함수를 완성
  setTimeout(() => {
    print();
  }, timeout);
}

// printWithDelay()를 실행해서 3초 늦게 "async callback" 문장을 띄우는 코드
printWithDelay(() => console.log('async callback'), 3000);

 

---

setTimeout 사용하는 함수

 

함수 실행 시, 3 -> 2-> 1-> “끝” 이 차례대로 출력(console.log)됨.

• 3은 함수 실행 시 딜레이 없이 바로 출력되어야 합니다.
• 2는 3이 출력된 1초 후 출력되어야 합니다.
• 1은 2가 출력된 1초 후 출력되어야 합니다.
• “끝”은 1이 출력된 1초 후 출력되어야 합니다.
• 3,2,1은 숫자가 출력되어야 합니다. (문자열 아님)

function countDownThree() {
  console.log(3);
  setTimeout(() => console.log(2), 1000);
  setTimeout(() => console.log(1), 2000);
  setTimeout(() => console.log('끝'), 3000);
}

 

 

 

---

setTimeout 으로 디바운싱 구현하기

 

변화하는 도중(1초 이내에 다른 변화가 생김)에는 효과가 발생 안 하다가, 

멈출 시(1초 이상 변화가 없음) 효과가 발생하는 것을 디바운싱(debouncing) 이라고 한다.

 

// input 엘리먼트 가져옴
const nameElem = document.querySelector('#inputName')

let alertTimer
function alertWhenTypingStops() {
  // 앞선 타이머를 리셋
  if (alertTimer) {
    clearTimeout(alertTimer)
  }
  
  const name = nameElem.value
  // 타이머 시작
  alertTimer = setTimeout(() => alert(`입력된 이름: ${name}`), 1000)
}

// input 이벤트는 사용자가 값을 수정할 때마다 발생
nameElem.addEventListener("input", alertWhenTypingStops)

 

 

---

setTimeout 으로 쓰로틀링 구현하기

 

조건이 지속적으로 만족될 때에는 효과(점수 증가, api 요청 등)가 주기적으로 발생하다가,

멈출 시(조건 불만족) 효과가 멈추는 것을 쓰로틀링(throttling) 이라고 한다.

 

쓰로틀링은 코드 자체는 길지 않지만, 한 번에 이해하기는 어려울 수 있다.

코드를 보면서, 언제 true고 false인지, 타이머가 언제 생겨나고 끝나는지가 중요하다.

 

// 자유롭게 코드를 작성하여, 예시 화면이 구현되도록 해 보세요.

// input 엘리먼트 가져옴
const nameElem = document.querySelector('#inputName')


let isInThrottle
function increaseScoreDuringTyping() {
  if (isInThrottle) {
    return
  }
  
  isInThrottle = true
  
  // 타이머 세팅
  setTimeout(() => {
    const score = document.querySelector('#score')
    const newScore = parseInt(score.innerText) + 1
    score.innerText = newScore
    
    isInThrottle = false
  }, 500)
}

// input 이벤트는 사용자가 값을 수정할 때마다 발생
nameElem.addEventListener("input", increaseScoreDuringTyping)