setTimeout

1. 기본 설명 및 기본 예시

// 기본 모양
// setTimeout(타이머가 만료된 후 실행할 '함수', 딜레이할 시간) // 시간은 1000 === 1초
setTimeout(function() {}, 시간)
setTimeout(() => {}, 시간) // 1번째 인자에는 코드입력 or 함수명 만 가능 (함수명()는 호출되기때문에 X)

// 함수명() 예시
function test() {
  console.log("첫 번째 메시지");
}

setTimeout(() => test(), 5000); 

// 코드입력 예시
setTimeout(() => { console.log("첫 번째 메시지") }, 1000); // running돌린시간 기준 1초뒤. 즉, 1시11분40초에 running돌렸으면 41초에 메시지뜸.
setTimeout(() => { console.log("두 번째 메시지") }, 3000); // running돌린시간 기준 3초뒤. 즉, 1시11분40초에 running돌렸으면 43초에 메시지뜸.
setTimeout(() => { console.log("세 번째 메시지") }, 6000); // running돌린시간 기준 6초뒤. 즉, 1시11분40초에 running돌렸으면 46초에 메시지뜸.

setTimeout(() => { console.log("첫 번째 메시지") }, 3000); // 첫번째 setTimeout기준아니다! 3개 메시지 모두 running 3초뒤에 한번에 나타난다.
setTimeout(() => { console.log("두 번째 메시지") }, 3000); // 하지만, 중첩해서 사용하면 1번째시간에+되어서 사용된다. 2번에 이어서 설명함.
setTimeout(() => { console.log("세 번째 메시지") }, 3000);

2. setTimeout with callback

// 콜백함수 예시
console.log("1번째"); // 1번) running과 동시에 1번째가 출력

function example(callbackfunc) { // 3번) 매개변수로 () => console.log("3번째") 가 들어오고
  setTimeout(() => { console.log("2번째"); callbackfunc() }, 2000); // 4번) running기준 2초뒤에, 2번째와 3번째가 함께 출력.
}

example(() => console.log("3번째")); // 2번) example함수가 호출되면

// setTimeout 중첩사용 예시 1
console.log("1번째"); // 1번) running과 동시에 1번째가 출력

setTimeout(function() {
  console.log("2번째"); // 2번) running기준 2초뒤에 2번째가 출력

  setTimeout(function() {
    console.log("3번째"); // 3번) running기준 5초뒤에 3번째가 출력. 즉, 2번째 2초+3초.
  }, 3000)

}, 2000);

// setTimeout 중첩사용 예시 2
setTimeout(function() {
  console.log("1번째"); // 1번) running기준 2초뒤에 1번째가 출력

  setTimeout(function() {
    console.log("2번째"); // 2번) running기준 4초뒤에 2번째가 출력

    setTimeout(function() {
      console.log("3번째"); // 3번) running기준 6초뒤에 3번째가 출력
    }, 2000)

  }, 2000)

}, 2000);

3. setInterval & setTimeout 의 호출 방법

function hi() {
  console.log('하이');
}

// setInterval
// 1초마다 hi함수 반복실행
// test를 따로 부르지 않아도, 밑에와 똑같이 작동한다!! (clearInterval함수를 사용하려고 식별자에 넣는것)
// 왜냐하면, test에 setInterval(hi, 1000)함수의 결과값이 들어가기 위해, 들어감과 동시에 호출되기때문에!!
let test = setInterval(hi, 1000);
setInterval(hi, 1000);

// setTimeout
// 2초 후에 hi함수 1번만 실행
// test를 따로 부르지 않아도, 밑에와 똑같이 작동한다!! (clearTimeout함수를 사용하려고 식별자에 넣는것)
// 왜냐하면, test에 setTimeout(hi, 2000)함수의 결과값이 들어가기 위해, 들어감과 동시에 호출되기때문에!!
let test = setTimeout(hi, 2000);
setTimeout(hi, 2000);