집 > 웹 프론트엔드 > JS 튜토리얼 > 다음 코드 줄을 실행하기 전에 JavaScript에서 5초 지연을 생성하려면 어떻게 해야 합니까?

다음 코드 줄을 실행하기 전에 JavaScript에서 5초 지연을 생성하려면 어떻게 해야 합니까?

Patricia Arquette

풀어 주다： 2024-10-25 17:07:03

원래의

488명이 탐색했습니다.

다음 줄을 실행하기 전에 5초를 기다리는 방법

JavaScript로 작업할 때는 실행 흐름을 제어하는 ​​것이 무엇보다 중요합니다. 다음 시나리오를 생각해 보세요. 변수 값 확인과 같은 특정 작업을 실행하기 전에 5초 동안 일시 중지하는 함수가 필요합니다.

setTimeout 함수 사용

전통적으로 JavaScript 개발자는 실행 지연을 발생시키기 위해 setTimeout 함수를 사용해 왔습니다. 이 함수는 실행할 코드를 나타내는 문자열과 밀리초 단위로 표현되는 지연이라는 두 가지 매개변수를 사용합니다. 특별한 경우 아래에서 발췌한 코드는 부족합니다.

<br>function stateChange(newState) {<br> setTimeout('', 5000);</p>
<p> if (newState == -1) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">alert('VIDEO HAS STOPPED');

로그인 후 복사

로그인 후 복사

}
}

여기서 문제는 setTimeout에 전달된 빈 문자열이 그렇지 않다는 것입니다. 아무런 효과가 없습니다. newState 변수를 확인하기 전에 5초 지연을 생성하려면 다음과 같이 코드를 수정해야 합니다.

<br>function stateChange(newState) {<br> setTimeout(() = > {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">if (newState == -1) {
  alert('VIDEO HAS STOPPED');
}

로그인 후 복사

}, 5000);
}

첫 번째 인수로 함수를 제공하여 코드를 지정합니다. 지연 후에 실행됩니다. 이제 함수는 newState를 확인하기 전에 5초 동안 정확하게 일시 중지됩니다.

대체 솔루션

최신 JavaScript에서는 async/를 활용할 수도 있습니다. 같은 결과를 얻기를 기다립니다. Async/await는 비동기 작업을 단순화하고 코드를 더 읽기 쉽게 만듭니다. 시나리오에 맞게 구현하는 방법은 다음과 같습니다.

<br>const Delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));</p>
<p>async function stateChange(newState) {<br> wait Delay(5000);</p>
<p>if (newState == -1 ) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">alert('VIDEO HAS STOPPED');