Opérations asynchrones en JavaScript : la boucle d'événements

소개
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 런타임 내부에 남아 있습니다.

Tout cela signifie que bien que JavaScript soit monothread, la boucle d'événements permet à JavaScript de sembler capable d'exécuter des choses de manière asynchrone en déchargeant des éléments vers des API et en traitant ces événements entrants quand il le peut.

Avant d'expliquer le fonctionnement de la boucle d'événements, vous devez comprendre quelques concepts spécifiques au sein du runtime JavaScript :

• Pile d'appels : une pile d'appels garde une trace des fonctions appelées et dans quel ordre les exécuter. Il exécute du code synchrone dans un ordre séquentiel.

• API Web : ce sont les outils qui gèrent les tâches asynchrones.

• Callback : Il s'agit d'une fonction qui est passée dans une autre fonction en tant qu'argument. Il permet d'exécuter du code en réponse à un événement.

• File d'attente d'événements/de rappel : elle contient les tâches en attente d'être exécutées une fois que la pile d'appels est vide.

Comment ça marche

La pile d'appels exécute du code synchrone jusqu'à ce qu'elle soit vide. Lorsqu'un code asynchrone est ajouté à la pile d'appels, il est transféré à l'API qui traite ensuite la tâche avant qu'elle ne soit envoyée à la file d'attente des événements.

Les rappels/fonctions qui ont été complétés par l'API sont ajoutés à la file d'attente des événements et la boucle d'événements recherche constamment dans la file d'attente des événements pour voir s'il y a un nouvel événement/tâche sur lequel javascript doit agir.

Notez que JavaScript ne peut pas agir sur les événements tant que la pile d'appels n'est pas vide. Par conséquent, une fois la pile d'appels vide, la boucle d'événements récupérera l'événement de la file d'attente et le placera dans la pile d'appels pour être exécuté comme les autres fonctions régulières.

Importance de la boucle d'événement

• Il maintient votre code réactif tout en effectuant des tâches en arrière-plan.

• Il vous aide à gérer efficacement vos tâches en surveillant les piles d'appels et la file d'attente de rappel.

• Il fournit une solution de contournement permettant à JavaScript d'effectuer des opérations non bloquantes dans lesquelles plusieurs tâches peuvent être traitées simultanément.

• Cela empêche votre programme d'entrer dans l'enfer des rappels. L'enfer des rappels se produit lorsque plusieurs rappels sont imbriqués les uns dans les autres, ce qui rend le code difficile à lire ou à maintenir.

Conclusion

Le comportement de la boucle d'événements détermine le moment où le code de votre application est exécuté. Plus vous avez de connaissances sur l'utilisation et la nécessité de la boucle d'événements, plus vous pouvez comprendre pourquoi votre code s'exécute quand il le fait.

Joyeux amis du codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!