이 기사에서는 JavaScript 비동기란 무엇인지 설명합니다. 무슨 소용이 있나요? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
우리는 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를 추가하여 효과를 살펴보겠습니다.
console.log(myData);
setTimeout(() => {
console.log('定时器');
}, 2000);
console.log(myData);출력, 서스펜스가 없어야 합니다
//null //null //定时器
실행 순서:
먼저 첫 번째 console.log(myData)를 실행합니다.
그런 다음 타이머를 만나 타이머를 일시 중지합니다(즉, 타이머를 일시 중지합니다)
계속 실행합니다. 두 번째 console.log(myData);
실행 가능한 js 코드가 없습니다. 돌아가서 일시 중지된 작업을 계속 실행하세요
계속해서 다음 밤나무를 살펴보세요
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: {…}}
//定时器
//点击了사용자 상호작용(마우스 클릭 이벤트, 페이지 스크롤 이벤트, 창 크기 변경 이벤트 등)이 발생할 때, Ajax, 타이머, 타이머 등은 이벤트 루프의 작업 대기열에 이벤트를 추가한 다음 실행을 기다립니다.
프론트 엔드 비동기에 대한 시나리오는 무엇입니까?
#🎜 🎜#
따라서 모든 "대기 상황"은 비동기식이어야 합니다비동기와 병렬을 혼동하지 마세요.
비동기는 단일 스레드이고 병렬은 다중 스레드입니다.
비동기: 기본 스레드의 작업이 동기 방식으로 실행된 후 작업 대기열이 생성됩니다.
병렬의 비동기 작업: 두 개 이상의 이벤트 체인이 시간이 지남에 따라 교대로 실행되므로 더 높은 수준에서 동시에 실행되는 것처럼 보입니다(언제든지 하나의 이벤트만 처리됨)
위 내용은 자바스크립트 비동기란 무엇인가요? 무슨 소용이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
