Πώς αλληλεπιδράτε με τον βρόχο γεγονότων (event…

Δεν αλληλεπιδρώ άμεσα με τον βρόχο γεγονότων, καθώς αυτός είναι μια εσωτερική μηχανική του κινητήρα JavaScript (π.χ., V8 σε Node.js και browsers). Η αλληλεπίδρασή μου γίνεται έμμεσα, μέσω ασύγχρονων λειτουργιών.

Τα κύρια σημεία επαφής:

Χρονομετρητές: setTimeout, setInterval. Τοποθετούν εργασίες στην ουρά των callbacks, οι οποίες εκτελούνται από τον βρόχο γεγονότων μετά την παρέλευση του χρόνου.
Promises: Promise. Οι μέθοδοι τους (then, catch, finally) καταγράφουν callbacks που εκτελούνται ασύγχρονα στις μικροεργασίες του βρόχου γεγονότων.
Ασύγχρονες λειτουργίες εισόδου/εξόδου: Αιτήματα προς τον διακομιστή (fetch, XMLHttpRequest), εργασία με το σύστημα αρχείων στο Node.js. Η ολοκλήρωσή τους προκαλεί την τοποθέτηση των αντίστοιχων callbacks στην ουρά των macro ή micro tasks.
Χειριστές γεγονότων DOM: addEventListener. Τα callbacks των χειριστών εκτελούνται όταν ο βρόχος γεγονότων επεξεργάζεται ένα γεγονός που συνέβη στο DOM.

Παράδειγμα χρήσης promises για μια ασύγχρονη λειτουργία:

// Ασύγχρονη λειτουργία
async function fetchData(url) {
  try {
    const response = await fetch(url); // Ασύγχρονη λειτουργία
    if (!response.ok) {
      throw new Error(`HTTP σφάλμα: ${response.status}`);
    }
    const data = await response.json(); // Ασύγχρονη λειτουργία
    return data;
  } catch (error) {
    console.error('Σφάλμα κατά την λήψη δεδομένων:', error);
    throw error; // Αναδρομική ρίψη
  }
}

// Κλήση της ασύγχρονης λειτουργίας και επεξεργασία αποτελέσματος
fetchData('https://api.example.com/data')
  .then(data => {
    console.log('Ληφθέντα δεδομένα:', data); // Αυτό το callback θα εκτελεστεί ασύγχρονα
  })
  .catch(error => {
    console.error('Παρουσιάστηκε σφάλμα:', error); // Αυτό το callback θα εκτελεστεί σε περίπτωση σφάλματος
  });

console.log('Αυτός ο κώδικας θα εκτελεστεί ΠΡΙΝ ολοκληρωθούν οι ασύγχρονες λειτουργίες.'); // Συγχρονικός κώδικας

Η κατανόηση του πώς λειτουργεί ο βρόχος γεγονότων βοηθάει στο να γράφω κώδικα που δεν μπλοκάρει, να διαχειρίζομαι αποτελεσματικά τις ασύγχρονες λειτουργίες και να αποφεύγω το πάγωμα της διεπαφής χρήστη. Λαμβάνω υπόψη ότι οι μακρές συγχρονικές λειτουργίες μπλοκάρουν το κύριο νήμα και τον βρόχο γεγονότων, γι' αυτό προσπαθώ να τις αποφεύγω ή να τις μεταφέρω σε web workers.

Πώς αλληλεπιδράτε με τον βρόχο γεγονότων (event loop);