비동기 자바스크립트

JavaScript는 단일 스레드 언어입니다.

즉, JS는 한 번에 한 가지만 수행합니다. 이것은 작동 방식을 이해하는 데 중요합니다.

JS에는 이벤트 루프라는 것이 있습니다. 수행할 작업의 1차원 배열입니다. JS 프로그램을 실행하면 대기열에 이벤트가 표시되고 선입선출 순서로 실행됩니다. 순차적으로 수행되며 프로그램의 상단에서 하단으로 이동합니다. 1행에 있는 모든 항목을 대기열에 넣은 다음 2행, 3행 등으로 팝니다. 해당 명령을 순서대로 실행합니다.

그래서 이것을 쓰는 것 :

let a = 0;
let b = a + 10;

a = b; //a == 10 as expected.

프로그램이 작동하려면 위에서 아래로 실행해야 합니다. 변수b가 선언될 때까지 변수a를 선언하지 않으며 a가 선언될 때까지 변수b를 재할당하지 않습니다. 이것은 우리도 순차적으로 생각하기 때문에 의미가 있습니다.

이것은 좋은 일이지만 때때로 우리는 다른 것을 기다리는 동안 JavaScript가 무언가를 하기를 원합니다. 예를 들어, setTimeout 함수로 시간 초과를 설정한 경우.

let a = 0;
let b

setTimeout(() => {
    b = a + 10
}, 0) //Setting a timeout of 0?

a = b; //here a == undefined??...

이제 그 예를 보고 생각해 보십시오. 시간 제한을 0으로 설정해도 예상대로 작동하지 않는 이유는 무엇입니까? 대기 없이 시간 초과를 설정하면 즉시 발생할 것으로 예상합니다. 왜 그렇지 않습니까?

이에 대한 간단한 답이 있으며 이벤트 루프에 있습니다. Javascript는 먼저 들어온 것이 먼저 나오는 순서대로 작업을 수행합니다. 기억하시나요?

실제로 호출을 순서대로 실행할 시간이 되면 다음과 같은 일이 발생합니다.

    declare "a" equal to 0
    declare "b" equal to undefined

    set a timeout of 0

    declare "a" equal to the value of "b" (which is undefined)

    check if timeout is done

    now that the timeout is done, add the anonymous function that was passed inside setTimeout to the queue.
    assign to "b" the value of "a" + 10

따라서 위의 내용을 보면 setTimeout이 큐에 추가할 나머지 프로그램을 차단하지 않는다는 것을 알 수 있습니다. 비동기식으로 작업을 수행하면 나머지 코드 실행을 방해하지 않고 백그라운드에서 더 큰 시간 초과가 발생할 수 있습니다. 시간 초과가 더 길었다면 출력도 다르지 않았을 것입니다. 타임아웃은 큐의 맨 아래에 항목을 추가하기 위해 타이머가 완료될 때까지 대기하지만 나머지 프로그램을 큐에 추가하기 전에는 대기하지 않습니다.

이와 같은 JS의 상호 작용을 이해하면 보다 신중한 코드를 작성할 수 있으며 프로그램을 더 읽기 쉽게 만들고 언어가 사용자에게 유리하게 설계된 방식을 활용할 수 있습니다. 그것이 없으면 JavaScript 프로그래밍은 개를 흔드는 꼬리와 더 비슷합니다.

비동기 코드를 이해하는 데 문제가 있는 경우 이 정보가 도움이 되기를 바랍니다. 계속 지켜봐 주시기 바랍니다.