JavaScript의 동기 및 비동기 이해 - 2 부
이 게시물의 첫 번째 부분에서 우리는 동기 및 비동기 개념 지각하다 자바 스크립트에서. 이 두 번째 부분에서 X 씨는 우리가 어떻게 setTimeout 및 AJAX 아피스 작업.
이상한 요청
X 씨와 떠나고 싶은 영화에 대한 이야기를 되짚어 보겠습니다. 외출 전에 X 씨의 작업을 남겨두고이 작업을 시작할 수 있다고 말하십시오. 다섯 시간 후 그는 당신의 메시지를 얻었다..
그는 그것에 대해 행복하지 않다. 기억해라. 그가 현재의 메시지로 끝날 때까지 새로운 메시지를 듣지 않는다. 만일 그가 당신의 것을 가져 간다면 그는 기다려야 해. 다섯 시간 심지어 작업을 시작합니다. 그래서, 시간 낭비하지 않기 위해서, 그는 도우미를 불러 들인다., 미스터 H.
기다리는 대신 H 씨에게 대기열에있는 작업에 대한 새 메시지 남기기 주어진 시간이 지나고 다음 메시지로 넘어 간다..
5 시간이 지난; 미스터 H 대기열을 업데이트합니다. 새로운 메시지와 함께. H 씨 이전에 발생한 모든 메시지를 처리 한 후에 X 씨 귀하가 요청한 업무를 수행합니다.. 그래서, 이런 식으로, 당신은 요청을 남길 수 있습니다. 나중에 준수하다, 그것이 성취 될 때까지 기다리지 말라..
하지만 왜 H 씨는 X 씨에게 직접 연락하지 않고 대기열에 메시지를 남기고 있습니까? 첫 번째 부분에서 언급했듯이 만 X 씨에게 연락하는 길은 그에게 메시지를 남김으로써 전화를 통해 - 예외가 아님.
1. setTimeout () 방법
원하는 코드 세트가 있다고 가정 해 보겠습니다. 특정 시간 후에 실행. 그렇게하기 위해서, 당신은 단지 그것을 함수로 감싸다., 과 그것을에 추가 setTimeout () 방법 지연 시간과 함께 의 구문 setTimeout () 다음과 같다:
setTimeout (함수, 지연 시간, arg ...)
그만큼 arg ... 매개 변수는 함수가 취하는 모든 인수를 나타냅니다. 지연 시간 밀리 초 단위로 추가됩니다. 아래에서 간단한 코드 예제를 볼 수 있습니다. “헤이” 콘솔에서 3 초 후.
setTimeout (function () console.log ( 'hey'), 3000);
일단 setTimeout () 달리기 시작하다, 호출 스택을 차단하는 대신 표시된 지연 시간이 끝날 때까지 타이머가 트리거 됨, 호출 스택은 다음 메시지에 대해 점차 비워진다 (Mr X와 Mr H 사이의 통신과 유사하게).
타이머가 만료되면 새 메시지 대기열에 합류하다, 이벤트 루프는 호출 스택이 그 전에 모든 메시지를 처리 한 후에 해제 될 때이를 선택합니다. 따라서 코드는 비동기 적으로 실행됩니다.
2. AJAX
AJAX (비동기 자바 스크립트 및 XML)는 XMLHttpRequest (XHR) API 서버 요청하기 과 응답을 처리한다..
브라우저가 XMLHttpRequest를 사용하지 않고 서버 요청을하면 페이지 새로 고침 과 UI를 다시로드합니다.. 요청 및 응답 처리가 XHR API에 의해 처리 될 때 UI는 영향을받지 않습니다..
그래서, 기본적으로 목표는 페이지 새로 고침없이 요청하기. 자, 어디입니까? “비동기식” 이것? XHR 코드를 사용하는 것만으로 XHR API가 AJAX라는 것을 의미하지는 않습니다. XHR API는 동기 및 비동기 방식으로 작업.
XHR 기본적으로 에 설정 됨 비동기로 일하다.; 함수가 XHR을 사용하여 요청을하면, 응답을 기다리지 않고 돌아온다..
XHR이 (으)로 구성된 경우 동기가있다, 이 함수는 응답이 수신되고 처리됩니다. 돌아 오기 전에.
코드 예제 1
이 예제는 XMLHttpRequest 객체 생성. 그만큼 열다() 메서드를 호출하고 요청 URL의 유효성을 검사하며 보내다() 메서드가 요청을 보냅니다..
var xhr = new XMLHttpRequest (); xhr.open ( "GET", url); xhr.send ();
응답 데이터에 대한 직접 액세스 보내다() 헛된 것입니다. 보내다() 기다리지 않는다. 요청이 완료 될 때까지 XMLHTTPRequest는 기본적으로 비동기 적으로 작동하도록 설정되어 있습니다..
코드 예제 2
그만큼 hello.txt 이 예제의 파일은 'hello'텍스트가 포함 된 간단한 텍스트 파일입니다. 그만큼 응답 XHR의 속성은 'hello'텍스트를 출력하지 않았기 때문에 유효하지 않습니다..
var xhr = new XMLHttpRequest (); xhr.open ( "GET", "hello.txt"); xhr.send (); document.write (xhr.response); // 빈 문자열
XHR은 다음과 같은 마이크로 루틴을 구현합니다. 응답을 계속 확인합니다. 매 밀리 초마다 무료 이벤트를 시작합니다. 여러 주마다 요청이 처리됩니다. 응답이로드되면, 로드 이벤트는 XHR에 의해 트리거됩니다., 유효한 응답을 제공 할 수있는.
var xhr = new XMLHttpRequest (); xhr.open ( "GET", "hello.txt"); xhr.send (); xhr.onload = function () document.write (this.response) // 문서에 'hello'를 씁니다.
로드 이벤트 내부의 응답 출력 'hello', 올바른 텍스트.
요청이 완료 될 때까지 다른 스크립트를 차단하지 않으므로 비동기 방식이 바람직합니다..
응답을 동 기적으로 처리해야하는 경우 그릇된 의 마지막 인자로서 열다, 어느 XHR API에 플래그를 지정합니다. 그것을 말하다. 동기가 있어야한다. (기본적으로 마지막 인수 인 열다 ~이다. 참된, 명시 적으로 지정하지 않아도됩니다).
var xhr = new XMLHttpRequest (); xhr.open ( "GET", "hello.txt", false); xhr.send (); document.write (xhr.response); // 문서에 'hello'를 씁니다.
왜이 모든 것을 배우는가??
거의 모든 초보자는 다음과 같은 비동기 개념을 사용하여 실수를 저지른다. setTimeout () 및 AJAX를 가정하여 setTimeout () 지연 시간 후에 코드를 실행하거나 AJAX 요청을하는 함수 내에서 직접 응답을 처리합니다..
퍼즐이 어떻게 적용되는지 알고 있다면 혼란을 피하십시오.. 지연 시간이 setTimeout () 시간을 나타내지 않는다. 코드 실행이 시작될 때, 그러나 시간 타이머가 만료되면 새로운 메시지가 대기열에 들어갑니다.이 메시지는 호출 스택에서 자유롭게 처리 할 수있는 경우에만 처리됩니다..
