절전, 대기, 지연 및 일시 중지에 해당하는 JavaScript를 사용하는 방법
자바스크립트는 웹의 언어입니다. JS는 ES5가 출시된 이후로 이전과 같지 않았습니다. 점점 더 많은 아이디어와 기능이 다른 언어에서 이식되고 JavaScript에 통합되고 있습니다. 그러한 기능 중 하나는 ES5가 출시된 후 JavaScript에서 가장 널리 사용된 기능인 Promises입니다.
그러나 JavaScript가 놓친 것 중 하나는 실행을 잠시 일시 중지하고 나중에 다시 시작하는 방법입니다. 이 게시물에서는 어떻게 이를 달성할 수 있는지 그리고 JavaScript에서 일시 중지 또는 잠자기가 실제로 무엇을 의미하는지 논의할 것입니다. 스포일러: JavaScript는 실제로 일시 중지되지 않습니다.
TL, DR
다음은 작업을 수행할 복사-파스타 코드입니다.
/** * * @param duration Enter duration in seconds */ function sleep(duration) { return new Promise(resolve => { setTimeout(() => { resolve() }, duration * 1000) }) } 그러나 여기에서 실제로 무슨 일이 일어나고 있습니까?
setTimeout과 가짜 약속
위의 스니펫을 사용하여 간단한 예를 살펴보겠습니다.
async function performBatchActions() { // perform an API call await performAPIRequest() // sleep for 5 seconds await sleep(5) // perform an API call again await performAPIRequest() } 이 함수 |_+_|는 호출될 때 단순히 |_+_| 기능, 대기 약 5초 , 그리고 같은 함수를 다시 호출합니다. 내가 쓴 방법 참고 약 5초 , 5초가 아닙니다.
여기서 강조해야 할 점은 위의 코드가 완벽한 수면을 보장하지 않는다는 것입니다. 지속 시간을 1초로 지정하면 JavaScript 보장하지 않는다 정확히 1초 후에 절전 모드 후에 코드 실행을 시작합니다. 왜요? 물어볼 수도 있습니다. 불행히도 타이머가 JavaScript에서 작동하고 일반적으로 이벤트 루프에서 작동하기 때문입니다. 그러나 JavaScript는 절전 모드 이후의 코드 조각이 절대 실행되지 않음을 절대적으로 보장합니다. ~ 전에 그 시간에 우리는 완전히 불확실한 상황이 아니라 부분적인 상황만 가지고 있으며 대부분의 경우 몇 밀리초의 여유 범위 내에 있습니다.
JavaScript는 단일 스레드입니다.
단일 스레드는 JavaScript 프로세스가 실제로 전혀 방해가 될 수 없음을 의미합니다. 동일한 메인 스레드에서 이벤트 리스너에서 HTTP 콜백에 이르기까지 모든 작업을 수행해야 합니다. 그리고 한 가지가 실행 중일 때 다른 것은 실행할 수 없습니다. 여러 버튼이 있고 위의 코드를 실행하여 10초 동안 절전 모드를 시뮬레이션하는 웹 페이지를 고려하십시오. 어떤 일이 일어날 것이라고 예상하십니까?
아무것도 없습니다. 웹페이지는 잘 작동하고 버튼은 반응하며 10초 절전이 완료되면 옆에 있는 코드가 실행됩니다. 따라서 JavaScript가 실제로 전체 메인 스레드를 차단하지 않았음이 분명합니다. 그렇게 했다면 웹페이지가 정지되고 버튼을 클릭할 수 없게 되었을 것이기 때문입니다. 그렇다면 JavaScript는 실제로 단일 스레드를 일시 중지하지 않고 실제로 어떻게 일시 중지했을까요?
이벤트 루프를 만나보세요
다른 언어와 달리 JavaScript는 위에서 아래로 선형 방식으로 코드를 계속 실행하지 않습니다. 이벤트 루프의 형태로 수많은 마법을 가진 비동기식 이벤트 구동 언어입니다. 이벤트 루프는 타이머 및 HTTP 요청과 같은 동기 및 특정 이벤트로 코드를 분할합니다. 정확히 말하면 작업 대기열과 마이크로 작업 대기열의 두 가지 대기열이 있습니다. JS를 실행할 때마다(마우스 클릭 이벤트 또는 약속과 같은) 비동기적인 것이 있을 때마다 JavaScript는 이를 작업 대기열(또는 마이크로 작업 대기열)에 던지고 계속 실행합니다. 단일 틱이 완료되면 작업 대기열과 마이크로태스크 대기열에 작업이 있는지 확인합니다. 그렇다면 콜백을 실행하거나 작업을 수행합니다.
이벤트 루프의 심층 작업에 관심이 있는 사람은 이 비디오를 시청하는 것이 좋습니다.
결론
JavaScript의 간단한 절전 명령을 위해 여기에 왔으며 JavaScript의 핵심 중 하나인 이벤트 루프에 대해 배웠습니다! 놀랍지 않습니까?
원래 Mehul Mohan이 발행한 https://www.freecodecamp.org
#자바스크립트 #웹개발