집 > 기사 > 웹 프론트엔드 > 자바스크립트 비동기란 무엇인가요? 무슨 소용이 있나요?

자바스크립트 비동기란 무엇인가요? 무슨 소용이 있나요?

不言앞으로: 2019-01-10 09:39:504817검색

이 기사에서는 JavaScript 비동기란 무엇인지 설명합니다. 무슨 소용이 있나요? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

JS 비동기란 무엇인가요?

우리는 JavaScript가 그 목적과 관련된 단일 스레드라는 것을 알고 있습니다. 브라우저 스크립팅 언어인 JavaScript의 주요 목적은 사용자와 상호 작용하고 DOM을 조작하는 것입니다. 이는 단일 스레드만 가능하다는 것을 결정합니다. 그렇지 않으면 매우 복잡한 동기화 문제가 발생합니다. 예를 들어 JavaScript에 두 개의 스레드가 동시에 있다고 가정해 보겠습니다. 한 스레드는 특정 DOM 노드에 콘텐츠를 추가하고 다른 스레드는 해당 노드를 삭제합니다. 이 경우 브라우저는 어떤 스레드를 사용해야 합니까?
소위 "싱글 스레드"는 한 번에 하나의 작업만 완료할 수 있다는 의미입니다. 여러 작업이 있는 경우 이전 작업이 완료된 후 다음 작업이 실행되며 대기열에 추가되어야 합니다.
이 모드의 장점은 구현이 상대적으로 간단하고 실행 환경이 상대적으로 단순하다는 것입니다. 단점은 하나의 작업이 오래 걸리는 한 후속 작업을 대기열에 넣어야 하므로 작업이 지연된다는 것입니다. 전체 프로그램 실행. 일반적인 브라우저 무응답(일시 중단)은 장시간 실행되는 특정 Javascript 코드 조각(예: 무한 루프)으로 인해 발생하는 경우가 많습니다. 이로 인해 전체 페이지가 이 위치에 멈춰 다른 작업을 수행할 수 없게 됩니다.
Ajax의 동기 요청은 브라우저의 UI(버튼, 메뉴, 스크롤 막대 등)를 잠그고 jquery의 Ajax에 이러한 동기 요청이 있기 때문에 브라우저가 정지되도록 합니다. 특히 요청된 데이터 양이 많은 경우에는 동기 요청을 사용하지 않도록 주의하세요.
비동기적인 느낌을 주기 위해 밤 몇 개 인용
백그라운드 인터페이스는 easy-mock을 사용하고 공식 주소는 https://easy-mock.com/
ajax는 axios를 사용하며 기본 코드는 다음과 같습니다. Followers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>javascript异步</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <button>点击</button>
  <script>
    {
      let myData = null
      //ajax请求
      function ajax() {
        axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
          .then(data => {
            console.log("ajax返回成功");// handle success
            myData = data.data
            console.log(myData);

          })
          .catch(error => {
            // console.log(error); // handle error
            console.log("ajax返回失败");
          })
      }
    }
  </script>
</body>
</html>

js를 추가하여 효과를 살펴보겠습니다.

Asynchronous-Timer

      console.log(myData);
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);

출력, 서스펜스가 없어야 합니다

//null
//null
//定时器

실행 순서:
먼저 첫 번째 console.log(myData)를 실행합니다.
그런 다음 타이머를 만나 타이머를 일시 중지합니다(즉, 타이머를 일시 중지합니다)
계속 실행합니다. 두 번째 console.log(myData);
실행 가능한 js 코드가 없습니다. 돌아가서 일시 중지된 작업을 계속 실행하세요
계속해서 다음 밤나무를 살펴보세요

Asynchronous- ajax#🎜 🎜#

      console.log(myData);
      ajax()
      console.log(myData);

출력을 보면 아직 긴장감이 없습니다

//null
//null
//ajax返回成功
//{success: true, data: {…}}(这是接口返回的数据，我们不必关心返回的具体内容，只要知道返回了就好，陌上寒注)

실행 순서는 기본적으로 위의 타이머와 유사하므로 여기서는 자세히 설명하지 않겠습니다.

밤 두 개를 병합하고

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);

//null
//null
//ajax返回成功
//{success: true, data: {…}}
//定时器

의 출력을 살펴보겠습니다. 문제를 찾았나요? 두 개의 비동기 함수가 만나면 어느 것이 먼저 실행되나요? 더 빨리 달리는 사람이 먼저 처형됩니까?

실제로 이는 또 다른 지식 포인트로 이어진다고도 할 수 있습니다.

태스크 큐와 이벤트 루프

두 개의 console.log(myData) ; 실행되면 모두 js의 메인 스레드에서 실행됩니다.

메인 스레드 외부에도 작업 대기열이 있습니다.
메인 스레드가 실행을 마치면 작업 대기열이 지워질 때까지 작업 대기열의 작업을 실행합니다(지속적으로 스캔 반복)

이 코드를 관찰하세요

      console.log(1);
      setTimeout(function () {
        console.log(2);
      }, 1000);
      console.log(3);

출력: 1, 3 , 2, 설명할게 없습니다

코드를 다시 살펴보세요

setTimeout(function(){console.log(1);}, 0);
console.log(2);

출력: 2, 1, 왜 이럴까요?

console.log(2); 메인 스레드에서 먼저 실행하고
setTimeout(function(){console.log(1);}, 0); #🎜 🎜#작업 대기열의 콘텐츠는 메인 스레드의 실행이 완료된 후에만 실행됩니다.

메인 스레드의 작업이 실행된 후 작업 대기열의 콘텐츠를 지속적으로 검사해야 하는 이유는 무엇입니까? ?

이 코드를 보시면 이해에 도움이 될 것입니다

      console.log(myData);
      ajax()
      setTimeout(() => {
        console.log('定时器');
      }, 2000);
      console.log(myData);
      const btn = document.querySelector('button')
      btn.onclick = () => {
        console.log("点击了");
      }

버튼 버튼에 클릭 이벤트를 추가했고, 브라우저가 새로고침되는 동안 계속 버튼을 클릭했습니다. 작업(물론 수동 클릭) )

출력 보기:

//null
//null
//(10次输出)点击了
//ajax返回成功
//{success: true, data: {…}}
//定时器
//点击了

이렇게 하면 메인 스레드가 작업 대기열을 순환해야 하는 이유를 이해할 수 있습니까? 이벤트 루프의 각 라운드를 틱이라고 합니다(vue의 nextTick을 생각하시나요?)

사용자 상호작용(마우스 클릭 이벤트, 페이지 스크롤 이벤트, 창 크기 변경 이벤트 등)이 발생할 때, Ajax, 타이머, 타이머 등은 이벤트 루프의 작업 대기열에 이벤트를 추가한 다음 실행을 기다립니다.

프론트 엔드 비동기에 대한 시나리오는 무엇입니까?

이벤트 바인딩이나 DOM 이벤트, 예를 들어 클릭 이벤트가 언제 클릭되는지는 모르겠지만 클릭하기 전에는 어떻게 해야 하나요? addEventListener를 사용하여 이벤트 유형을 등록하면 브라우저는 이를 수신하기 위한 별도의 모듈을 갖게 됩니다. 이벤트가 트리거되면 브라우저의 특정 모듈이 해당 함수를 비동기 대기열에 넣습니다. 비어 있으면 함수가 직접 실행됩니다. ES6의 약속 🎜🎜#
#🎜 🎜#
따라서 모든 "대기 상황"은 비동기식이어야 합니다

한 문장으로 말하면 기다려야 할 때 비동기식을 사용해야 하는데,

비동기 및 병렬

비동기와 병렬을 혼동하지 마세요.
비동기는 단일 스레드이고 병렬은 다중 스레드입니다.
비동기: 기본 스레드의 작업이 동기 방식으로 실행된 후 작업 대기열이 생성됩니다.
병렬의 비동기 작업: 두 개 이상의 이벤트 체인이 시간이 지남에 따라 교대로 실행되므로 더 높은 수준에서 동시에 실행되는 것처럼 보입니다(언제든지 하나의 이벤트만 처리됨)

위 내용은 자바스크립트 비동기란 무엇인가요? 무슨 소용이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Vue 비상위-하위 구성요소에서 값 전송 및 이벤트 버스(eventbus) 사용 소개다음 기사：Vue 비상위-하위 구성요소에서 값 전송 및 이벤트 버스(eventbus) 사용 소개

자바스크립트 비동기란 무엇인가요? 무슨 소용이 있나요?

JS 비동기란 무엇인가요?

Asynchronous-Timer

Asynchronous- ajax#🎜 🎜# console.log(myData); ajax() console.log(myData);

이 코드를 보시면 이해에 도움이 될 것입니다

비동기 및 병렬

관련 기사

Asynchronous- ajax#🎜 🎜#
console.log(myData); ajax() console.log(myData);