Suspense를 사용하여 자바스크립트 애니메이션의 완료를 체크하는 방법은?

먼저, Promise 객체를 사용하여 애니메이션을 감싸고 완료되었을 때 resolve되는 함수를 작성해야 합니다. 이렇게 하면 애니메이션 작업이 완료될 때까지 앱의 실행이 중단됩니다.

function animate() {
  return new Promise((resolve) => {
    // 애니메이션 코드 작성
    // 애니메이션 완료 후 resolve 호출
  });
}

그런 다음 이 Promise를 호출하는 함수를 작성하고, 이 함수를 async 함수로 선언하여 await 키워드를 사용할 수 있도록 해야 합니다.

async function checkAnimationCompletion() {
  await animate();
  
  // 애니메이션이 완료된 후 실행할 코드 작성
}

이제 checkAnimationCompletion 함수를 호출하면 애니메이션이 완료될 때까지 실행이 중단됩니다. 애니메이션이 완료되면 그 시점에서 실행할 코드를 작성할 수 있습니다.

이 방법을 사용하면 애니메이션이 완료되었는지 신속하게 체크할 수 있으며, 코드를 더욱 깔끔하게 구성할 수 있습니다.