JavaScript Async 정보(자세한 튜토리얼)

JavaScript 비동기는 초보자를 위해 작성되었으며 특정 참조 값이 있으므로 관심 있는 친구가 참조할 수 있습니다.

어느 날 갑자기 백그라운드에서 데이터를 호출하여 첫 ​​페이지에 표시하는 메서드를 작성했지만 출력 결과는 항상 정의되지 않은 비어 있음, 데이터를 얻을 수 없습니다. 다양한 소스에서 정보를 검색한 후 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('aaa');
      $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
        console.log('bbb');
        return data;
      });
    }
    var data = getUserInfo();
    console.log(data);
    console.log('ccc');
    renderUserInfo(data);

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

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

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

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

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

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JavaScript를 사용하여 왼쪽 메뉴 효과를 얻는 방법

JavaScript에서 모두 선택 취소 효과를 얻는 방법

vuex를 호출하여 vue.js에 인터페이스 데이터를 저장하는 방법

위 내용은 JavaScript Async 정보(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!