"Θα τελειώσω αργότερα!"
Οι συναρτήσεις που εκτελούνται παράλληλα με άλλες συναρτήσεις ονομάζονται ασύγχρονες
Ένα καλό παράδειγμα είναι το JavaScript setTimeout()
Τα παραδείγματα που χρησιμοποιήθηκαν στο προηγούμενο κεφάλαιο, ήταν πολύ απλοποιημένα.
Ο σκοπός των παραδειγμάτων ήταν να δείξουν τη σύνταξη των συναρτήσεων επανάκλησης:
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
Στο παραπάνω παράδειγμα, το myDisplayer είναι το όνομα μιας συνάρτησης.
Μεταβιβάζεται στο myCalculator() ως όρισμα.
Στον πραγματικό κόσμο, οι επανακλήσεις χρησιμοποιούνται συχνότερα με ασύγχρονες συναρτήσεις.
Ένα τυπικό παράδειγμα είναι το JavaScript setTimeout().
Όταν χρησιμοποιείτε τη συνάρτηση JavaScript setTimeout(), μπορείτε να καθορίσετε μια συνάρτηση επανάκλησης που θα εκτελεστεί στο χρονικό όριο:
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setTimeout() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
</script>
</body>
</html>
Στο παραπάνω παράδειγμα, το myFunction χρησιμοποιείται ως επιστροφή κλήσης.
Το myFunction μεταβιβάζεται στο setTimeout() ως όρισμα.
3000 είναι ο αριθμός των χιλιοστών του δευτερολέπτου πριν από το time-out, άρα Το myFunction() θα κληθεί μετά από 3 δευτερόλεπτα.
Όταν μεταβιβάζετε μια συνάρτηση ως όρισμα, θυμηθείτε να μην χρησιμοποιείτε παρενθέσεις.
Δεξιά: setTimeout(myFunction, 3000);
Λάθος: setTimeout(myFunction(), 3000);
Αντί να περάσετε το όνομα μιας συνάρτησης ως όρισμα σε μια άλλη συνάρτηση, μπορείτε πάντα να περάσετε μια ολόκληρη συνάρτηση αντ' αυτού:
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id="demo"></h1>
<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
</script>
</body>
</html>
Στο παραπάνω παράδειγμα, function(){ myFunction("I love you !!!"); } χρησιμοποιείται ως επιστροφή κλήσης. Είναι μια ολοκληρωμένη λειτουργία. Η πλήρης συνάρτηση μεταβιβάζεται στη setTimeout() ως όρισμα.
3000 είναι ο αριθμός των χιλιοστών του δευτερολέπτου πριν από το time-out, άρα Το myFunction() θα κληθεί μετά από 3 δευτερόλεπτα.
Όταν χρησιμοποιείτε τη συνάρτηση JavaScript setInterval(), μπορείτε να καθορίσετε μια συνάρτηση επανάκλησης που θα εκτελείται για κάθε διάστημα:
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>
<p>Using setInterval() to display the time every second (1000 milliseconds).</p>
<h1 id="demo"></h1>
<script>
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
</script>
</body>
</html>
Στο παραπάνω παράδειγμα, το myFunction χρησιμοποιείται ως επιστροφή κλήσης.
Το myFunction μεταβιβάζεται στο setInterval() ως όρισμα.
1000 είναι ο αριθμός των χιλιοστών του δευτερολέπτου μεταξύ των διαστημάτων, άρα Το myFunction() θα καλείται κάθε δευτερόλεπτο.
Με τον ασύγχρονο προγραμματισμό, τα προγράμματα JavaScript μπορούν να ξεκινήσουν μακροχρόνιες εργασίες, και συνεχίστε να εκτελείτε άλλες εργασίες παράλληλα.
Όμως, τα ασύγχρονα προγράμματα είναι δύσκολο να γραφτούν και δύσκολο να εντοπιστούν σφάλματα.
Εξαιτίας αυτού, οι περισσότερες σύγχρονες μέθοδοι ασύγχρονης JavaScript δεν χρησιμοποιούν επανακλήσεις. Αντίθετα, στο JavaScript, ο ασύγχρονος προγραμματισμός επιλύεται χρησιμοποιώντας τις Promises.
Θα μάθετε για τις υποσχέσεις στο επόμενο κεφάλαιο αυτού του σεμιναρίου.