자바스크립트 비동기란 무엇인가요? 무슨 소용이 있나요?
이 기사에서는 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);
로그인 후 복사
출력을 보면 아직 긴장감이 없습니다
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(1);
setTimeout(function () {
console.log(2);
}, 1000);
console.log(3);코드를 다시 살펴보세요
setTimeout(function(){console.log(1);}, 0);
console.log(2);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, 타이머, 타이머 등은 이벤트 루프의 작업 대기열에 이벤트를 추가한 다음 실행을 기다립니다.
프론트 엔드 비동기에 대한 시나리오는 무엇입니까?
- 예약된 작업: setTimeout, setInverval
- 네트워크 요청: ajax 요청, img 이미지의 동적 로딩# 🎜🎜#
- 이벤트 바인딩이나 DOM 이벤트, 예를 들어 클릭 이벤트가 언제 클릭되는지는 모르겠지만 클릭하기 전에는 어떻게 해야 하나요? addEventListener를 사용하여 이벤트 유형을 등록하면 브라우저는 이를 수신하기 위한 별도의 모듈을 갖게 됩니다. 이벤트가 트리거되면 브라우저의 특정 모듈이 해당 함수를 비동기 대기열에 넣습니다. 비어 있으면 함수가 직접 실행됩니다. ES6의 약속 🎜🎜# 대기가 발생할 수 있는 경우
- 대기 과정에서 경고처럼 프로그램을 차단할 수 없는 경우
-
#🎜 🎜#
따라서 모든 "대기 상황"은 비동기식이어야 합니다
- 프로그램을 차단할 수 없습니다.
비동기 및 병렬
비동기와 병렬을 혼동하지 마세요.
비동기는 단일 스레드이고 병렬은 다중 스레드입니다.
비동기: 기본 스레드의 작업이 동기 방식으로 실행된 후 작업 대기열이 생성됩니다.
병렬의 비동기 작업: 두 개 이상의 이벤트 체인이 시간이 지남에 따라 교대로 실행되므로 더 높은 수준에서 동시에 실행되는 것처럼 보입니다(언제든지 하나의 이벤트만 처리됨)
위 내용은 자바스크립트 비동기란 무엇인가요? 무슨 소용이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7471
15
1377
52
77
11
48
19
19
30
C++ 함수로 비동기 프로그래밍을 구현하는 방법은 무엇입니까?
Apr 27, 2024 pm 09:09 PM
요약: C++의 비동기 프로그래밍을 사용하면 시간이 많이 걸리는 작업을 기다리지 않고 멀티태스킹이 가능합니다. 함수 포인터를 사용하여 함수에 대한 포인터를 만듭니다. 콜백 함수는 비동기 작업이 완료되면 호출됩니다. Boost::asio와 같은 라이브러리는 비동기 프로그래밍 지원을 제공합니다. 실제 사례에서는 함수 포인터와 Boost::asio를 사용하여 비동기 네트워크 요청을 구현하는 방법을 보여줍니다.
간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법
Jan 05, 2024 pm 06:08 PM
JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용
Java 프레임워크 비동기 프로그래밍의 일반적인 문제 및 솔루션
Jun 04, 2024 pm 05:09 PM
Java 프레임워크 비동기 프로그래밍의 3가지 일반적인 문제와 해결 방법: 콜백 지옥: Promise 또는 CompletableFuture를 사용하여 보다 직관적인 스타일로 콜백을 관리합니다. 리소스 경합: 동기화 기본 요소(예: 잠금)를 사용하여 공유 리소스를 보호하고 스레드로부터 안전한 컬렉션(예: ConcurrentHashMap) 사용을 고려하세요. 처리되지 않은 예외: 작업에서 예외를 명시적으로 처리하고 예외 처리 프레임워크(예: CompletableFuture.Exceptionally())를 사용하여 예외를 처리합니다.
golang 프레임워크는 동시성과 비동기 프로그래밍을 어떻게 처리합니까?
Jun 02, 2024 pm 07:49 PM
Go 프레임워크는 Go의 동시성 및 비동기 기능을 사용하여 동시 및 비동기 작업을 효율적으로 처리하기 위한 메커니즘을 제공합니다. 1. 동시성은 Goroutine을 통해 달성되어 동시에 여러 작업을 실행할 수 있습니다. 2. 비동기 프로그래밍은 채널을 통해 구현됩니다. 작업을 차단하지 않고 실행할 수 있습니다. 3. HTTP 요청 동시 처리, 데이터베이스 데이터의 비동기 획득 등과 같은 실제 시나리오에 적합합니다.
JavaScript에서 HTTP 상태 코드를 쉽게 얻는 방법
Jan 05, 2024 pm 01:37 PM
JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가
Python 비동기 프로그래밍: 비동기 코드에서 효율적인 동시성을 달성하는 방법
Feb 26, 2024 am 10:00 AM
1. 비동기 프로그래밍을 사용하는 이유는 무엇입니까? 기존 프로그래밍에서는 차단 I/O를 사용합니다. 즉, 프로그램은 작업을 계속하기 전에 작업이 완료될 때까지 기다립니다. 이는 단일 작업에 적합할 수 있지만 많은 수의 작업을 처리할 때 프로그램 속도가 느려질 수 있습니다. 비동기 프로그래밍은 기존 차단 I/O의 한계를 깨고 비차단 I/O를 사용합니다. 즉, 프로그램은 작업이 완료될 때까지 기다리지 않고 실행을 위해 여러 스레드나 이벤트 루프에 작업을 배포할 수 있습니다. 이를 통해 프로그램은 여러 작업을 동시에 처리할 수 있어 프로그램의 성능과 효율성이 향상됩니다. 2. Python 비동기 프로그래밍의 기본 Python 비동기 프로그래밍의 기본은 코루틴과 이벤트 루프입니다. 코루틴은 함수가 일시 중지와 재개 사이를 전환할 수 있도록 하는 함수입니다. 이벤트 루프는 일정 관리를 담당합니다.
PHP 비동기 프로그래밍의 장점과 단점은 무엇입니까?
May 06, 2024 pm 10:00 PM
PHP에서 비동기 프로그래밍의 장점에는 더 높은 처리량, 더 낮은 대기 시간, 더 나은 리소스 활용도 및 확장성이 포함됩니다. 단점으로는 복잡성, 디버깅의 어려움, 제한된 라이브러리 지원 등이 있습니다. 실제 사례에서 ReactPHP는 WebSocket 연결을 처리하는 데 사용되어 비동기 프로그래밍의 실제 적용을 보여줍니다.
Python 비동기 프로그래밍: 비동기 프로그래밍의 본질을 밝히고 코드 성능을 최적화합니다.
Feb 26, 2024 am 11:20 AM
비동기 프로그래밍, 영어 비동기 프로그래밍은 다른 작업이 완료될 때까지 기다리지 않고 프로그램의 특정 작업을 동시에 실행할 수 있어 프로그램의 전반적인 운영 효율성이 향상됨을 의미합니다. Python에서 asyncio 모듈은 비동기 프로그래밍을 구현하는 주요 도구입니다. 이는 비동기 프로그래밍에 필요한 코루틴, 이벤트 루프 및 기타 구성 요소를 제공합니다. 코루틴: 코루틴은 스레드와 마찬가지로 실행을 일시 중단했다가 재개할 수 있는 특수 함수이지만 코루틴은 스레드보다 더 가볍고 메모리를 덜 소비합니다. 코루틴은 async 키워드로 선언되고 실행은 wait 키워드에서 일시 중지됩니다. 이벤트 루프: 이벤트 루프(EventLoop)는 비동기 프로그래밍의 핵심입니다.
