비동기식이 필요한 이유는 무엇입니까? 왜? 코드를 보자.
Question 1:
for (var i = 0; i <100000; i ++) {} alert ( 'Hello World !!!');이 코드는 경고를 실행하기 전에 100 번 실행하는 것을 의미합니다. 이것이 가져 오는 문제는 후속 코드의 실행을 심각하게 차단한다는 것입니다. 이유에 관해서는 주로 JS가 단일 스레드이기 때문입니다.
Question 2:
우리는 일반적 으로이 문제를 해결해야합니다. 헤드에 스크립트 코드를 추가 해야하는 경우 일반적으로 window.onload 에 코드를 작성합니다 (DOM이 작동하는 경우). window.onload 추가 해야하는 이유에 대해 생각해 본 적이 있습니까? 그 이유는 DOM을 운영 할 때 스크립트 뒤의 HTML 코드 브라우저가로드되기 시작하지 않았지만 그녀가 태어나 기 전에 그녀와 결혼하는 것에 대해 생각하기 때문입니다. 이것이 가능합니까? 물론 불가능합니다. 창을 추가하십시오. onload 가 window.onload 에서 코드가 완전히로드 된 후에도 실행되기 때문일 수있는 이유는 비동기와 동일합니다.
질문 3 :
때로는 페이지가 한 번에 모든 코드를로드 할 필요가 없지만 특정 요구 사항에 따라 특정 코드 만로드합니다.
단일 스레드 란 무엇입니까?
단일 스레드가 코드 세그먼트의 실행이며 먼저 이전의 스레드를 실행 한 다음 이전 스레드가 완료된 후 다음 스레드를 실행한다는 것을 이해할 수 있습니다.
그렇다면 어떤 JS가 비동기식입니까?
나는이 일이 거의 나쁘게 사용된다고 믿는다. Settimeout/SetInterval 및 Ajax입니다. 나는 모두가 Ajax 비동기식을 알고 있다고 생각합니다. 물론, 동기식 일 수도 있지만 아무도 그렇게하지 않습니다. 그러나 일부 친구는 Settimeout과 SetInterval이 비동기식에 대해 다르게 알지 못할 수 있습니다. Settimeout이 왜 비동기인지에 대해 이야기 해 봅시다.
settimeout (function () {console.log (0);}, 0) console.log (1); // 1 // 0 이 코드를 실행 한 후, 첫 번째 프린트 1은 0 대신 1입니다. 일부 친구는 혼란스러워지기 시작합니까? 0 초 후에 console.log(0) 실행하도록 Settimeout을 설정했지만 Settimeout은 비동기이기 때문에 매우 특별합니다. 인쇄물이 1과 0 인 이유를 제쳐두고 봅시다. 비동기식에 대해 이야기합시다.
비동기식이란 무엇입니까?
예를 들어, 일부 식당에서는 미리 예약해야하며 다른 식당이 식사를 마치면 갈 수 있습니다. 그러므로 다른 사람들이 식사를 할 때 다른 일을 할 수 있습니다. 다른 사람들이 식사를 마치면 누군가가 당신에게 알리므로 갈 수 있습니다. Ajax와 같은 코드의 경우 콜백 메소드를 정의합니다. 이 콜백 메소드는 당시에 실행되지 않지만이 코드를 실행하기 전에 서버 응답이 완료 될 때까지 기다립니다.
Settimeout의 이전 섹션으로 돌아 갑시다. 이와 같이 작동합니다. 시간이 0인지 아닌지에 관계없이 Settimeout을 정의하는 순간부터 JS는이 코드를 직접 실행하지 않지만 이벤트 큐에 버립니다. 페이지의 모든 동기화 작업이 완료된 후에 만 이벤트 큐의 코드가 실행됩니다. 동기화 란 무엇입니까? 비동기 코드 외에도 동기화 -_-입니다.
비동기 JS를 구현하는 방법은 무엇입니까?
1. settimout을 사용하여 비동기식을 달성하십시오
settimeout (function () {console.log (document.getElementByTagName ( 'body') [0]);}, 0)그러나 Settimeout에는 작은 문제가 있습니다.이 시간은 부정확합니다. 이 코드를 더 빨리 실행하려면 HTML5에서 제공하는 함수를 사용할 수 있습니다.
requestAnimationFrame (function () {console.log (document.getElementByTagName ( 'body') [0]);})requestAnimationFrame과 Settimeout의 차이점은 requestAnimationFrame이 Settimeout보다 빠르게 실행되므로 많은 사람들이 requestAnimationFrame을 사용하여 애니메이션을 생성한다는 것입니다.
2. 스크립트 태그를 동적으로 만듭니다
var head = document.getElementByTagName ( 'head') [0]; var script = document.createElement ( 'script'); script.src = 'mengzhuzi.js'; head.appendChild ( 'script');
3. 스크립트에서 제공 한 Defer/Async를 사용하십시오
<script src = "xx.js"defer> </script>
연기 :이 코드는 페이지가로드 된 후에 만 실행됩니다.
<script src = "xx.js"async> </script>
비동기 : 스크립트 코드를 비동기로 실행합니다
그러나 비동기식은 다음 코드와 같은 단점입니다.
일반 코드 :
try {새 오류 ( 'hello world');} catch (err) {console.log (err);} // error : hello world (…)비동기 코드 :
try {settimout (function () {Throw New Error ( 'Hello World');}, 0)} catch (err) {console.log (err);} // settimout은 정의되지 않았습니다 (…)캐치의 코드가 실행되지 않았다는 것을 알 수 있습니다. 즉, 시도가 비동기에서 코드를 캡처 할 수 없습니다.
요약
JS의 비동기식과이를 달성하는 방법은 기본적으로 끝납니다. 그것은 JS 비동기식에 대한 진부한 일이지만, 여전히이 기사의 내용이 모든 사람에게 도움이되기를 바랍니다.