Ασύγχρονο JavaScript

"Θα ολοκληρωθεί αργότερα!"

Οι συναρτήσεις που εκτελούνται παράλληλα με άλλες συναρτήσεις ονομάζονται ασύγχρονες (asynchronous)

Ένας καλός παράδειγμα είναι το JavaScript setTimeout()

Ασύγχρονο JavaScript

Το παράδειγμα που χρησιμοποιήθηκε στο προηγούμενο κεφάλαιο έχει σημαντικά απλοποιηθεί.

Το σκοπός της είναι να δείξει τη γραμματική της callback συνάρτησης:

Μπορείτε να καθορίσετε τη συνάρτηση που θα εκτελείται σε κάθε διαλείμμα:

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Δοκιμάστε το προσωπικά

d.getSeconds();myDisplayer είναι το όνομα της συνάρτησης.

η οποία μεταφέρεται ως παράμετρος myCalculator()。

Στην πραγματικότητα, οι callbacks χρησιμοποιούνται συχνά με ασύγχρονες συναρτήσεις.

Ένας τυπικός παράδειγμα είναι το JavaScript setTimeout()。

Αναμονή καθυστέρησης

Αναμονή διαλείμματος: setTimeout() Όταν, μπορείτε να καθορίσετε τη συνάρτηση callback που θα εκτελεστεί μετά την καθυστέρηση:

Μπορείτε να καθορίσετε τη συνάρτηση που θα εκτελείται σε κάθε διαλείμμα:

setTimeout(myFunction, 3000);
setInterval(myFunction, 1000);
  document.getElementById("demo").innerHTML = "I love You !!";
}

Δοκιμάστε το προσωπικά

Στο παραπάνω παράδειγμαΣτο παραπάνω παράδειγμα: χρησιμοποιείται ως callback.

Η συνάρτηση (όνομα συνάρτησης) μεταφέρεται ως παράμετρος στη setTimeout()。

χρησιμοποιείται ως callback. Είναι μια πλήρης συνάρτηση. Η πλήρης συνάρτηση μεταφέρεται ως παράμετρος στη setTimeout(). 1000 είναι το χρονικό διάστημα μεταξύ των επαναλήψεων σε χιλιοσέκονδες δευτερόλεπτα, οπότε。

Όταν μεταφέρετε μια συνάρτηση ως παραμέτρο, θυμηθείτε να μην χρησιμοποιείτε κόλπα.

Σωστό: setTimeout(myFunction, 3000);

Σφάλμα: setTimeout(myFunction(), 3000);

Αν δεν μεταφέρετε το όνομα της συνάρτησης ως παραμέτρο σε μια άλλη συνάρτηση, μπορείτε πάντα να μεταφέρετε την ολόκληρη συνάρτηση:

Μπορείτε να καθορίσετε τη συνάρτηση που θα εκτελείται σε κάθε διαλείμμα:

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  function myFunction(value) {}}
}

Δοκιμάστε το προσωπικά

d.getSeconds();document.getElementById("demo").innerHTML = value; function(){ myFunction("I love You !!!"); }

χρησιμοποιείται ως callback. Είναι μια πλήρης συνάρτηση. Η πλήρης συνάρτηση μεταφέρεται ως παράμετρος στη setTimeout(). 1000 είναι το χρονικό διάστημα μεταξύ των επαναλήψεων σε χιλιοσέκονδες δευτερόλεπτα, οπότε。

3000 είναι το χρονικό διάστημα πριν την εξάντληση σε χιλιοσέκονδες δευτερόλεπτα, οπότε θα καλείται μετά από 3 δευτερόλεπτα

Αναμονή διαλείμματος: myFunction Στη χρήση JavaScript συνάρτησης

Μπορείτε να καθορίσετε τη συνάρτηση που θα εκτελείται σε κάθε διαλείμμα:

Παράδειγμα
setInterval(myFunction, 1000);
  function myFunction() {
  let d = new Date();
  document.getElementById("demo").innerHTML =
  d.getHours() + ":" +
  d.getMinutes() + ":" +
}

Δοκιμάστε το προσωπικά

d.getSeconds();Στο παραπάνω παράδειγμα: ως ανατροφοδότηση.

Η συνάρτηση (όνομα συνάρτησης) μεταφέρεται ως παράμετρος στη myFunction。

setInterval() 1000 είναι το χρονικό διάστημα μεταξύ των επαναλήψεων σε χιλιοσέκονδες δευτερόλεπτα, οπότε myFunction()

Κάθε δευτερόλεπτο θα καλείται μια φορά.

Αναμονή αρχείου

Αν δημιουργήσετε μια συνάρτηση για τη φόρτωση εξωτερικών πόρων (όπως scripts ή αρχεία), δεν μπορείτε να χρησιμοποιήσετε αυτούς τους πόρους πριν το πλήρες φορτώμα τους.

Αυτό είναι η καλύτερη στιγμή για τη χρήση callback.mycar.html) και εμφανίστε το αρχείο HTML στην ιστοσελίδα όταν το αρχείο έχει φορτωθεί πλήρως：

Αναμονή αρχείου：

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(this.responseText);
    }
      myCallback("Λάθος: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Δοκιμάστε το προσωπικά

Στο παραπάνω παράδειγμαmyDisplayer ως ανατροφοδότηση.

Η συνάρτηση (όνομα συνάρτησης) μεταφέρεται ως παράμετρος στη getFile()。

Παρακάτω είναι mycar.html Η αντίγραφο:

mycar.html

<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>Ένα αυτοκίνητο είναι ένας τροχαλιωμένος, αυτόνομος μηχανοκίνητος όχημα που χρησιμοποιείται για την μεταφορά.</p>
<p>Οι περισσότερες ορισμοί της λέξης καθορίζουν ότι τα αυτοκίνητα σχεδιάζονται για να κυκλοφορούν κυρίως στους δρόμους, να έχουν θέσεις για έναν έως οκτώ ανθρώπους, να έχουν συνήθως τέσσερα ρόδα.</p>
<p>(Wikipedia)</p>