집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 비동기 란 무엇입니까?

JavaScript 비동기 란 무엇입니까?

小云云원래의: 2017-12-02 09:05:231711검색

초보 프로그래머로서 우리는 종종 매우 간단한 문제에 직면하지만 무슨 일이 일어나고 있는지 알 수 없습니다. 예를 들어 백그라운드에서 데이터를 호출하여 첫 페이지에 표시하려는 경우 출력 결과는 항상 비어 있고 정의되지 않았습니다. 데이터를 가져올 수 없습니다. 그 이유는 무엇입니까? 다양한 소스에서 정보를 검색한 후 JS 비동기식의 "구덩이"에 빠졌다는 사실을 발견했습니다. 맞습니다. 이 기사에서는 주로 JS의 비동기 작업이 무엇인지 공유합니다.

우리는 싱글 스레드, 멀티 스레드, 동기화, 비동기라는 개념을 자주 듣습니다. 그렇다면 이러한 개념은 정확히 무엇일까요?
위의 개념부터 시작하겠습니다

단일 스레드, 다중 스레드, 동기화 및 비동기에 대한 기본 이해

모든 실행 프로그램(즉, 프로세스)에는 메인 스레드라고 하는 적어도 하나의 스레드가 있습니다. 메인 스레드는 프로그램 시작 시 생성되며, 메인 기능을 실행하는 데 사용됩니다.

1. 단일 스레드는 하나의 메인 스레드만 있는 스레드입니다. 코드는 위에서 아래로 순차적으로 실행됩니다. 메인 스레드는 프로그램의 모든 코드(UI 표시 및 새로 고침, 네트워크 요청, 로컬 저장, etc.) [하나의 스레드가 모든 것을 한다 생각만 해도 좀 피곤하다]

2. 멀티스레딩은 이름에서 알 수 있듯이 사용자가 독립적으로 생성할 수 있는 여러 스레드로 구성된 프로그램입니다. 사용자가 독립적으로 생성한 여러 프로세스는 기본 스레드에 상대적인 하위 스레드입니다. 자식 스레드와 메인 스레드는 독립적인 실행 단위로, 각각의 실행이 서로 영향을 주지 않으므로 동시에 실행될 수 있습니다.

이런 무미건조한 이론을 듣기만 해도 조금 현기증이 나시나요? 공교롭게도 저도 처음 봤을 때 어지러웠어요.

정보를 찾는 과정에서 다른 사람들의 생생한 비유를 발견했습니다.

예를 들어 싱글 스레딩은 부엌에 가서 요리를 하는 것을 의미하고, 멀티 스레딩은 두 사람이 혼자 요리하고 다른 하나는 요리를 한다는 것을 의미합니다.

이렇게 하면 이해가 더 쉬울 것 같은데요?

동기식과 비동기식은 무엇인가요?

우리는 간단한 삶의 예를 사용하여 설명합니다.

호텔을 예약하려고 전화해서 직원에게 방이 있는지 물어보면 직원이 먼저 방이 있는지 확인해야 대답을 할 수 있습니다.

동기화란 전화를 끊지 않고 직원이 방이 있는지 알려줄 때까지 기다리는 것을 의미합니다.
비동기식은 전화를 끊고 식사, 음료 등 다른 일을 하다가 직원이 정보를 찾은 후 전화를 한다는 것을 의미합니다.

여기서 우리의 주제가 나옵니다.

JS의 비동기 작업이란 무엇입니까?

JS의 실행 환경은 단일 스레드입니다. 즉, 프로그램이 순차적으로 실행될 때 한 번에 하나의 작업만 실행할 수 있습니다. 프로그램이 실행되려면 현재 작업이 완료될 때까지 기다려야 합니다. 현재 작업이 실행되는지 여부에 관계없이 실행됩니다. 얼마나 오래 (다음 프로그램이 급하게 실행되면 기다리는 것이 정말 불편할 것입니다.)

후속 프로그램의 불편한 차단 문제를 해결하기 위해. JavaScript에는 실제로 지연 처리인 비동기 처리 모드가 있습니다.

예를 들어 설명하겠습니다.

var getUserInfo = function () {
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        return data;
      });
    }
    var data = getUserInfo();
    renderUserInfo(data)

getUserInfo 함수가 호출됩니다. 백그라운드에서 데이터를 가져오는 데 많은 시간이 걸릴 수 있습니다. 이를 위해서는 renderUserInfo가 실행되기 전에 데이터를 가져올 때까지 기다려야 합니다. 다행히 JS에는 데이터를 가져올 때 renderUserInfo가 데이터를 가져올 때까지 기다릴 필요 없이 직접 실행할 수 있는 비동기 작업이 있습니다.

그렇다면 이 두 기능은 어떤 순서로 실행되나요? 걱정하지 마세요. 디버깅해 보겠습니다.

var getUserInfo = function () {
      console.log(&#39;aaa&#39;);
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        console.log(&#39;bbb&#39;);
        return data;
      });
    }
    var data = getUserInfo();
    console.log(data);
    console.log(&#39;ccc&#39;);
    renderUserInfo(data);

순차 실행의 출력은 원래 "aaa", "bbb", "ccc"로 간주되었습니다. 그렇죠?

그러나 상황은 그렇게 간단하지 않습니다. 콘솔 출력을 살펴보겠습니다.

출력 결과는 순차적이지 않습니다.

즉, 데이터를 가져오기 위해 getJSON 함수를 실행할 때 프로그램은 다음 단계를 실행하기 전에 데이터를 가져올 때까지 기다리지 않고 데이터를 가져오는 단계를 건너뛰고 직접 실행합니다. 따라서 데이터도 비어 있습니다.

이것은 JS의 비동기 메커니즘입니다.

위 내용은 JavaScript 비동기에 대한 자세한 설명이므로 모든 분들께 도움이 되기를 바랍니다.

JavaScript 비동기 란 무엇입니까?

관련 기사