Async/Await를 사용하여 JavaScript에서 Sleep하는 방법

Key Takeaways

1. JavaScript에는 기본 제공 sleep()이 없지만 setTimeout과 Promises를 사용하여 시뮬레이션할 수 있습니다.
2. async/await를 사용하면 비동기 함수에서 실행을 일시 중지할 수 있습니다.
3. 이 비차단 sleep 메서드는 메인 스레드를 응답성 있게 유지합니다.

많은 프로그래밍 언어에서 기본 제공 sleep() 함수는 개발자가 지정된 기간 동안 코드 실행을 일시 중지할 수 있도록 합니다. 그러나 JavaScript에는 네이티브 sleep() 함수가 없습니다. 그럼에도 불구하고 비동기 프로그래밍 기술을 사용하여 유사한 기능을 달성할 수 있습니다. 이 기사에서는 JavaScript에서 sleep과 유사한 동작을 구현하는 다양한 방법을 살펴봅니다.

JavaScript의 비동기적 특성 이해

JavaScript는 본질적으로 비동기적이며 단일 스레드입니다. setTimeout() 및 setInterval()과 같은 함수를 사용하면 지연 후 코드 실행을 예약할 수 있지만, 다음에 오는 코드의 실행을 일시 중지하지는 않습니다. 예를 들어 다음과 같습니다.

console.log('시작');
setTimeout(() => {
  console.log('지연됨');
}, 1000);
console.log('종료');

출력:

시작
종료
지연됨

위에서 볼 수 있듯이 setTimeout() 함수는 console.log('지연됨') 문을 1초 후에 실행되도록 예약하지만, 코드는 이 지연을 기다리지 않고 즉시 console.log('종료')를 실행합니다.

Promises를 사용하여 사용자 지정 Sleep 함수 만들기

Sleep 함수를 시뮬레이션하기 위해 지정된 지연 후에 resolve되는 Promise를 반환하는 함수를 만들 수 있습니다. 이 접근 방식을 사용하면 async/await 구문을 사용하여 비동기 함수 내에서 실행을 일시 중지할 수 있습니다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

사용 예시:

async function demoSleep() {
  console.log('2초 동안 잠자기...');
  await sleep(2000);
  console.log('이제 깨어났습니다!');
}

demoSleep();

출력:

2초 동안 잠자기...
이제 깨어났습니다!

이 예에서 demoSleep 함수는 async로 선언되어 await 키워드를 사용하여 sleep 함수의 promise가 2초 후에 resolve될 때까지 실행을 일시 중지할 수 있습니다.

한 줄 Sleep 함수

간결한 코드를 위해 화살표 함수 구문을 사용하여 sleep 함수를 한 줄로 정의할 수 있습니다.

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

이 버전은 이전 예와 동일하게 작동하지만 더 간결한 구문을 제공합니다.

루프에서 Sleep 사용

사용자 지정 sleep 함수는 반복 사이에 지연을 도입하려는 루프 내에서 특히 유용할 수 있습니다.

async function countWithDelay() {
  for (let i = 1; i <= 5; i++) {
    console.log(`카운트: ${i}`);
    await sleep(1000); // 1초 동안 기다립니다.
  }
  console.log('카운트가 완료되었습니다.');
}

countWithDelay();

출력:

카운트: 1
카운트: 2
카운트: 3
카운트: 4
카운트: 5
카운트가 완료되었습니다.

이 예에서 루프는 각 반복 사이에 1초 동안 기다려 원하는 대로 실행을 효과적으로 일시 중지합니다.

중요한 고려 사항

• Async 함수만 해당: await 키워드는 async 키워드로 선언된 함수 내에서만 사용할 수 있습니다. async 함수 외부에서 await를 사용하려고 하면 구문 오류가 발생합니다.

• 비차단 동작: 사용자 지정 sleep 함수는 메인 스레드를 차단하지 않습니다. async 함수 내에서 실행을 일시 중지하지만 다른 작업이 동시에 계속 실행되도록 합니다.

• 차단 루프 방지: 지연을 구현하기 위해 busy-wait 루프(예: 현재 시간을 확인하는 while 루프)를 사용하지 마십시오. 메인 스레드를 차단하고 응용 프로그램을 응답하지 않게 만들 수 있습니다.

결론

JavaScript에는 네이티브 sleep() 함수가 없지만 Promises와 async/await 구문을 사용하여 이 동작을 효과적으로 시뮬레이션할 수 있습니다. 이 접근 방식을 사용하면 메인 스레드를 차단하지 않고도 비동기 함수 내에서 실행을 일시 중지할 수 있으므로 지연을 처리할 때 더 읽기 쉽고 유지 관리하기 쉬운 코드를 사용할 수 있습니다.

FAQs

async 함수 외부에서 sleep()을 사용할 수 있습니까?

아니요, await sleep()은 async 함수 내에서 사용해야 합니다.

Sleep 함수는 다른 작업을 차단합니까?

아니요, 비차단이며 다른 작업이 동시에 실행될 수 있도록 합니다.

Sleep의 한 줄 버전이 있습니까?

예: const sleep = ms => new Promise(r => setTimeout(r, ms));

Leapcell은 Node.js 프로젝트 호스팅을 위한 최고의 선택입니다.

Leapcell은 웹 호스팅, 비동기 작업 및 Redis를 위한 차세대 서버리스 플랫폼입니다.

다국어 지원

• Node.js, Python, Go 또는 Rust로 개발합니다.

무료로 무제한 프로젝트 배포

• 사용량에 대해서만 지불합니다. 요청이나 요금이 없습니다.

탁월한 비용 효율성

• 유휴 요금 없이 사용한 만큼만 지불합니다.
• 예: $25는 평균 응답 시간 60ms에서 694만 건의 요청을 지원합니다.

간소화된 개발자 경험

• 간편한 설정을 위한 직관적인 UI.
• 완전 자동화된 CI/CD 파이프라인 및 GitOps 통합.
• 실행 가능한 통찰력을 위한 실시간 메트릭 및 로깅.

손쉬운 확장성 및 고성능

• 고도의 동시성을 쉽게 처리할 수 있도록 자동 확장.
• 제로 운영 오버헤드 — 구축에만 집중하세요.

문서에서 자세히 알아보세요!

X에서 팔로우하세요: @LeapcellHQ