[JS]setTimeout이란? 활용법과 딜레이 시간 파라미터를 지정하지 않는 경우?

이제까지 비동기적으로 실행되는 자바스크립트에서 동기화처리를 하기 위해 Promise를 활용했었다.
setTimeout은 뭔가 임시방편 같은 느낌이었는데, 개발을 하다가 확실히 간단한 동기화처리에는 setTimeout이 효율적인 방법이란 걸 알게 됐다.

setTimeout이란?

• 일정 시간이 지난 후에 특정 함수를 실행하도록 예약하는 메서드

코드

setTimeout(function, delay, ...args)

• function: 지연 시간 후에 실행될 함수.
• delay: 지연 시간(밀리초 단위, 1000ms = 1초).
• ...args: 실행될 함수에 전달될 선택적 인수.

setTimeout(() => {
    console.log("3초 후에 이 메시지가 출력됩니다.");
}, 3000); 

• 위처럼 콜백함수로 바로 작성하여 개발하는 경우가 많다.

function sum(a, b) {
    console.log(a + b);
}

setTimeout(sum, 1000, 5, 10); // 1초 후에 "15"가 출력됩니다.

• 또, 스크립트에 이미 개발해놓은 함수에 파라미터를 추가하여 호출 및 전달하여도 된다.

setTimeout을 동기화처리에 활용

• 비동기처리는 다양한 이유(실시간데이터처리, 병렬작업, api호출, 이벤트리스너)로 사용자경험을 개선하는데 도움을 줍니다.

• api호출 후 코드들을 동기화처리 하기 위해서 간단하게 setTimeout을 활용할 수 있습니다.

• 이 때, 특정 밀리초를 파라미터로 전달하게 되면 api응답 전에 지정한 시간이 지나버려 꼬여버릴 수 있습니다.

• 시간 파라미터를 0 혹은 생략하게 되면, 비동기 API 호출을 수행한 이후의 작업이 순차적으로 실행됩니다.

• 예시

  function fetchData(url, callback) {
    console.log("API 호출 시작...");
  
    // 비동기 API 호출
    fetch(url)
      .then(response => response.json())
      .then(data => {
        console.log("API 호출 완료. 데이터:", data);
      })
      .catch(error => console.error("API 호출 에러:", error));
    //이후 setTimeout호출로 api호출이 끝난 후 callback함수실행
    setTimeout(() => {
       callback(data);
    }, 0); // 0ms의 지연 시간으로 콜백 호출
  }