JavaScript에서 X 초 동안 기다립니다
-
setTimeout()을 사용하여 JavaScript에서 X 초를 기다립니다 -
promises및async/await를 사용하여 JavaScript에서 X 초를 기다립니다 -
for루프를 사용하여 JavaScript에서 동기식 ‘지연’기능 구현
이 튜토리얼은 JavaScript에서 실행을 계속하기 전에 x 초 동안 기다릴 수있는 방법을 설명합니다. x 초 동안 스레드를 차단하는delay(seconds)함수를 구현합니다. 이 지연에 대한 여러 구현 기술도 설명합니다.
delay 함수 구현에 대해 이야기 할 때 가장 널리 사용되는 메소드는 비동기setTimeout()입니다.
setTimeout()을 사용하여 JavaScript에서 X 초를 기다립니다
비동기식setTimeout()메서드는 콜백 함수를 인수로 사용하는 상위 함수 중 하나이며 입력 시간이 경과 한 후 해당 함수를 실행합니다. 매개 변수에 주어진 시간은 ms단위입니다.
console.log('I am the first log');
setTimeout(function() {
console.log('I am the third log after 5 seconds');
}, 5000);
console.log('I am the second log');
출력:
I am the first log
I am the second log
I am the third log after 5 seconds
promises 및async/await를 사용하여 JavaScript에서 X 초를 기다립니다
비동기 컨텍스트에서 지연 기능을 구현하는 한 가지 방법은 async/await개념과 promises개념을 결합하는 것입니다. 내부에 새로운promise를 반환하는 지연 함수를 만들 수 있으며, 원하는 대기 시간으로setTimeout()메서드를 호출합니다. 그런 다음 원하는대로 비동기 컨텍스트 내에서 delay함수를 호출 할 수 있습니다.
function delay(n) {
return new Promise(function(resolve) {
setTimeout(resolve, n * 1000);
});
}
async function myAsyncFunction() {
// Do what you want here
console.log('Before the delay')
await delay(5);
console.log('After the delay')
// Do what you want here too
}
myAsyncFunction();
출력:
Before the delay
After the delay
지연 기능은 다음 예제와 같이 ECMAScript 6의 화살표 구문을 사용하여 최적화 할 수도 있습니다.
const delay = (n) => new Promise(r => setTimeout(r, n * 1000));
for루프를 사용하여 JavaScript에서 동기식 ‘지연’기능 구현
위의delay()함수를 사용할 비동기 컨텍스트가 없거나setTimeout()함수를 사용하고 싶지 않다고 가정합니다. 이 경우 일반 for루프와 Date()클래스로 동기지연 함수를 구현하여 시간을 계산할 수 있습니다.
이 기능의 구현은 매우 간단합니다. 원하는 시간 동안 CPU를 바쁘게 유지하는 것이 전부입니다. 이는 경과 시간을 계산하고 대기 시간과 비교하여 이후에 계속 실행할 수 있도록하는 것입니다.
function syncDelay(milliseconds) {
var start = new Date().getTime();
var end = 0;
while ((end - start) < milliseconds) {
end = new Date().getTime();
}
}
console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')
출력:
Before the delay
After the delay