Operasi Asynchronous dalam JavaScript: Gelung Acara

소개
JavaScript는 기본적으로 동기식입니다
동기식 및 비동기식 작업
이벤트 루프
작동 원리
이벤트 루프의 중요성
결론

---

소개

이렇게 생각해 보세요. 서버에서 데이터를 가져오고, 사용자 인터페이스를 업데이트하고, 모든 사용자 작업에 실시간으로 응답해야 하는 웹 애플리케이션을 개발했지만 코드가 문제가 될지 걱정됩니다. 이러한 작업을 효율적으로 처리할 수 있습니다. 걱정할 필요가 없습니다. 여기서 이벤트 루프가 시작됩니다.

이 기사에서는 이벤트 루프의 작동 방식, JavaScript의 동기 작업과 비동기 작업의 차이점, 필수 비차단 아키텍처로서 이벤트 루프의 중요성에 대해 설명하겠습니다.

Javascript는 기본적으로 동기식입니다.

기본적으로 Javascript는 동기식이며 코드는 위에서 아래로 순차적으로 읽혀집니다. JS는 단일 스레드이므로 각 작업은 다음 작업을 진행하기 전에 이전 작업이 완료될 때까지 기다려야 합니다. 이는 각 코드 줄이 한 번에 하나씩 처리되며 주어진 순간에 하나의 작업/함수만 실행된다는 것을 의미합니다.

JavaScript에서는 여러 코드 조각을 병렬로 실행할 수 있는 방법이 없으며, 핵심이 동기식이며 단일 스레드인 언어에서 병렬 처리를 수행하려는 시도는 야심적입니다. JavaScript의 동기적 특성을 이해하면 웹 애플리케이션이 사용자 상호 작용에 응답하고 작업을 처리하는 방식을 이해하는 데 도움이 됩니다.

function greet(name) {
    return `Hello, ${name}!`;
}

const greeting = greet("Deb");
console.log(greeting);                                                 

이 예에서 Javascript는 작성된 순서대로 코드를 실행합니다. 'greet' 함수는 'Deb' 인수를 사용하여 호출됩니다. 그런 다음 함수는 콘솔에 기록되는 인사말 문자열을 반환합니다.

출력:

Hello, Deb!

각 줄은 실행되기 전에 이전 줄이 끝날 때까지 기다립니다. 따라서 해당 기능이 완료되어야 결과가 '인사말'에 할당될 수 있습니다.

동기식 및 비동기식 작업

이벤트 루프가 무엇인지 알아보기 전에 비동기 작업이 무엇인지, 그리고 JavaScript에서 동기 작업과 비동기 작업의 차이점에 대해 조금 살펴보겠습니다. 비동기 작업은 프로그램 흐름과 독립적으로 실행되는 활동입니다.

앞서 설명한 것처럼 Javascript는 기본적으로 동기식이며 동기식 코드는 다음 작업이 시작되기 전에 각 작업/함수가 완료되어야 하는 차단 동작을 생성합니다.

반면, 비동기 작업은 후속 작업의 실행을 차단하지 않으며 자바스크립트가 특정 비동기 작업이 완료되기를 기다리는 동안 다른 작업을 수행할 수 있도록 합니다. 간단히 말해서 함수를 비동기(async)로 선언하면 함수에 완료하는 데 시간이 필요한 코드가 있고 동기 코드가 먼저 실행되는 동안 이러한 함수가 연기된다는 의미입니다.

차단이 없기 때문에 이전 비동기 코드를 완료하지 않고도 다음 동기 코드를 실행할 수 있으며 실행할 준비가 된 모든 비동기 코드는 이벤트 대기열에 대기하게 됩니다.

// Synchronous code
console.log("Step 1");
console.log("Step 2");

동기 코드는 한 줄씩 실행된다는 점을 기억하세요. 여기서 JavaScript는 작성된 순서대로 명령문을 실행합니다.

출력:

Step 1
Step 2

반면 비동기 코드를 사용하면 작업이 완료될 때까지 기다리는 동안 JavaScript가 계속 실행될 수 있습니다.

// Asynchronous code
console.log("1st Function");

setTimeout{function(){ // WEB API
  console.log("2nd Function");
},2000);

console.log("3rd Function");

출력:

1st Function
3rd Function
2nd Function

첫 번째와 세 번째 함수는 동기식이므로 먼저 실행되고 두 번째 함수는 호출 스택에서 제거되어 웹 API에 의해 처리됩니다. 웹 API는 이벤트 큐에 넣기 전에 2000ms를 기다리도록 비동기적으로 명령합니다. 이후 이벤트 루프에 의해 빈 호출 스택에 다시 배치되고 최종적으로 실행됩니다.

이벤트 루프

가장 간단한 정의에서 이벤트 루프는 비동기 이벤트를 동기적으로 처리하는 방법입니다.

더 정교하게 정의하면 이벤트 루프는 필요할 때 비동기 작업을 실행할 수 있도록 하는 Javascript 런타임에서 지속적으로 실행되는 코드 루프입니다. 즉, JavaScript의 제한 설계를 통해 많은 작업을 효율적으로 처리할 수 있습니다.

실행할 특정 JavaScript 작업이 있을 때까지 회전하며 코드 배경에 유지됩니다. 예를 들어 클릭 이벤트 핸들러에서 연결된 코드가 있는 버튼을 클릭하거나 외부 파일을 로드할 때 이벤트 루프는 필요할 때 JavaScript 코드를 실행하기 위해 JavaScript 런타임 내부에 남아 있습니다.

Maksud semua ini ialah walaupun JavaScript adalah satu-benang, gelung acara membolehkan JavaScript kelihatan boleh menjalankan perkara secara tidak segerak dengan memunggah perkara ke API dan memproses peristiwa tersebut apabila ia boleh.

Sebelum saya menerangkan cara gelung acara berfungsi, terdapat beberapa konsep khusus dalam masa jalan JavaScript yang perlu anda fahami:

• Timbunan Panggilan: Timbunan panggilan menjejaki fungsi yang dipanggil dan dalam susunan untuk melaksanakannya. Ia melaksanakan kod segerak dalam susunan berjujukan.

• API Web: Ini ialah alatan yang mengendalikan tugas tak segerak.

• Panggil Balik: Ini ialah fungsi yang dihantar ke fungsi lain sebagai hujah. Ia membantu melaksanakan kod sebagai tindak balas kepada acara.

• Baris Gilir Acara/Panggil Balik: Ini memegang tugasan yang menunggu untuk dilaksanakan setelah tindanan panggilan jelas.

Bagaimana ia Berfungsi

Timbunan panggilan menjalankan kod segerak sehingga ia kosong. Apabila kod tak segerak ditambahkan pada tindanan panggilan, ia akan dipindahkan ke API yang kemudiannya memproses tugas sebelum ia dihantar ke baris gilir acara.

Panggilan balik/fungsi yang telah dilengkapkan oleh API akan ditambahkan pada baris gilir acara dan gelung acara sentiasa mencari dalam baris gilir acara untuk melihat sama ada terdapat sebarang acara/tugas baharu yang javascript perlu bertindak.

Perhatikan bahawa JavaScript tidak boleh bertindak pada acara sehingga timbunan panggilan kosong. Oleh itu, apabila tindanan panggilan kosong, gelung acara akan merebut acara daripada baris gilir dan meletakkannya ke dalam tindanan panggilan untuk dilaksanakan seperti fungsi biasa yang lain.

Kepentingan Gelung Acara

• Ia memastikan kod anda responsif semasa menjalankan tugas di latar belakang.

• Ia membantu mengurus tugas anda dengan berkesan dengan memantau susunan panggilan dan baris gilir panggilan balik.

• Ia menyediakan penyelesaian untuk JavaScript melaksanakan operasi tanpa sekatan di mana berbilang tugas boleh dikendalikan secara serentak.

• Ia menghalang program anda daripada masuk ke neraka panggil balik. Neraka panggilan balik berlaku apabila berbilang panggilan balik bersarang antara satu sama lain menjadikan kod sukar dibaca atau dikekalkan.

Kesimpulan

Kelakuan gelung acara menentukan apabila kod dalam aplikasi anda dijalankan. Lebih banyak pengetahuan yang anda miliki tentang penggunaan dan keperluan untuk gelung acara, lebih banyak anda boleh memahami sebab kod anda berjalan apabila ia berlaku.

Selamat pengekodan sahabat!

Atas ialah kandungan terperinci Operasi Asynchronous dalam JavaScript: Gelung Acara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!