연습 1 

생각 포인트 (이 도전에 필요한 코드 작성 없음) : 도전 1에서 제공된 코드를 검사합니다. 콘솔 로그는 어떤 순서로 표시되어야 합니까? 안녕하세요 먼저 또는 Partnah 먼저? 

function sayHowdy() {
  console.log("Howdy");
}

function testMe() {
  setTimeout(sayHowdy, 0);
  console.log("Partnah");
}
testMe();

해결책 1 

출력은 먼저 Partnah이고 그다음에 Howdy입니다. 설명 했듯이 setTimeout은 콜백 함수이므로 실행이 작업 대기열에 배치되고 호출 스택의 모든 항목이 실행 된 후에 만 ​​호출됩니다.

연습 2 

3 초 후에 콘솔 로그가 welcome 함수를 지연하도록 만듭니다. 

function delayedGreet() {}

delayedGreet();
// should log (after 3 seconds): welcome

해결 방법 2 

function delayedGreet() {
  setTimeout(() => console.log("welcome"), 3000);
}

부드러운 소개이지만 중요한 기초입니다. 이것은 콜백 함수 (실제로는 브라우저 API가 아님)를 자체 함수로 래핑하는 방법입니다.

연습 3 

콘솔이 hello를 즉시 기록하고 2 초 후에 good bye를 기록하는 helloGoodbye 함수를 만듭니다. 

function helloGoodbye() {}

helloGoodbye();
// should log: hello should also log (after 3 seconds): good bye

해결책 3 

function helloGoodbye() {
  console.log("hello");
  setTimeout(() => console.log("good bye"), 3000);
}

우리가 또한 쓸 수 있다는 것을 주목하십시오

function helloGoodbye() {
  setTimeout(() => console.log("good bye"), 3000);
  console.log("hello");
}

이 예제에서는 순서가 중요하지 않습니다. console.log는 항상 setTimeout이 호출되기 전에 먼저 실행되기 때문입니다.

연습 4 

콘솔이 매초마다 인사를 기록하는 brokenRecord 함수를 만듭니다. 작업에 만족하면 종료 코드 버튼을 사용하여 콘솔 로그를 중지합니다. 

function brokenRecord() {}
brokenRecord();
// should log (every second): hi again

해결 방법 4 

function brokenRecord() {
  function printHi() {
    console.log("hi again");
  }
  setInterval(printHi, 1000);
}

이전에 setInterval을 본 적이 없다면 여기에서 루프를 사용하고 싶지만 원하는 출력을 얻지 못할 수 있습니다. setInterval은 브라우저 / 환경이 제공하는 웹 API의 메소드입니다. 항상 그렇듯이 MDN은 그들 모두를 탐구하는 환상적인 방법입니다.

연습 5 

콘솔이 지금은 1 초마다 hi를 기록하는 limitedRepeat 함수를 생성합니다. 이 작업을 수행하는 방법을 잘 모르는 경우 clearInterval 사용 방법을 조사하십시오. 

function limitedRepeat() {}
limitedRepeat();
// should log (every second, for 5 seconds): hi again

해결책 5 

function limitedRepeat() {
  function printHi() {
    console.log("hi again");
  }
  function clear() {
    clearInterval(id);
  }
  printHi();
  const id = setInterval(printHi, 1000);
  setTimeout(clear, 5000);
}

그리고 여기에 setInterval의 대응 물인 clearInterval이 있습니다. setInterval을 호출하면 간격을 고유하게 식별하는 간격 ID를 반환합니다. 간격을 중지하기 위해 clearInterval에 전달할 수 있습니다.