JavaScript는 단일 스레드에서 실행됩니다.

4352 단어 자바스크립트비동기 처리
자신이 착각하고 있었기 때문에 기사로 합니다.

문제


<!DOCTYPE html>
<html>

<head>
    <title>Document</title>
</head>

<body>
    <script>
        console.log(`Start ${new Date()}`)

        // 3秒後にCallbackと表示
        setTimeout(() => {
            console.log(`Callback ${new Date()}`)
        }, 3000)

        // 10秒間かかる処理を実行する
        const now = new Date()
        let dummy = 0
        while (new Date() - now < 10000) {
            dummy++ // 適当な計算処理
        }

        console.log(`End ${new Date()}`)
    </script>
</body>

</html>

이 HTML을 브라우저에서 표시하면 콘솔에 Start, Callback, End가 어떤 순서로 표시됩니까?
  • Start 가 표시됩니다
  • 3 초 후에 Callback
  • 10 초간 걸리는 처리를 실행하는이 사이에 적어도 3 초간 경과하므로 Callback 라고 표시된다
  • End 로 표시

    • 따라서 Start → Callback → End
    그렇게 생각하지 않습니까?

    죄송합니다! 부정답입니다.



    실행 결과


    Start Tue May 21 2019 10:39:40 GMT+0900 (日本標準時)
End Tue May 21 2019 10:39:50 GMT+0900 (日本標準時)
Callback Tue May 21 2019 10:39:50 GMT+0900 (日本標準時)

    실제로는 Start → End → Callback 의 순서로 실행됩니다.

    포인트



    여기 근처가 포인트입니다.
  • setTimeout는 지정된 시간 후에 함수 실행을 예약합니다.
  • 그러나 자바 스크립트는 단일 스레드에서 실행됩니다.
  • 즉, 둘 이상의 처리를 병렬로 실행할 수 없습니다.
  • 두 개 이상의 함수를 동시에 실행할 수 없습니다


    • 해설



    즉, 정확하게는 다음과 같은 순서가 됩니다.
  • Start 가 표시됩니다
  • 3 초 후에 Callback
  • 10 초가 걸리는 처리를 실행하는 동안 최소 3 초가 경과하지만 여전히 주 처리가 실행 중이므로 2. 함수를 실행할 수 없습니다
  • End 로 표시
  • 메인의 처리가 완료해 다음의 처리를 실행 가능하게 되었으므로, 2.의 함수가 실행된다 Callback 라고 표시된다

    • 따라서 Start → End → Callback 의 순서로 실행됩니다.



    덧붙여서, setTimeout 를 사용하는 경우 이외에도,
  • Ajax에서 비동기 처리
  • Node.js에서 파일을 읽는 것과 같은 비동기 처리

    • 등의 경우도 싱글 스레드이므로 같은 처리 순서가 됩니다.
    안드로이드에서 Kotlin coroutine (Async, Await)을 사용하여 Sakut과 HTTP 통신 (비동기 처리)
    루팡 3세의 카샤카샤라는 타이틀 콜을 좋아하는 문자열로 생성한다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage