"Θα καλέσω αργότερα!"
Μια επιστροφή κλήσης είναι μια συνάρτηση που μεταβιβάζεται ως όρισμα σε μια άλλη συνάρτηση
Αυτή η τεχνική επιτρέπει σε μια συνάρτηση να καλέσει μια άλλη συνάρτηση
Μια λειτουργία επανάκλησης μπορεί να εκτελεστεί μετά την ολοκλήρωση μιας άλλης λειτουργίας
Οι συναρτήσεις JavaScript εκτελούνται με τη σειρά που ονομάζονται. Όχι με τη σειρά που ορίζονται.
Αυτό το παράδειγμα θα καταλήξει να εμφανίζει "Αντίο":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
Αυτό το παράδειγμα θα καταλήξει να εμφανίζει "Hello":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
Μερικές φορές θα θέλατε να έχετε καλύτερο έλεγχο για το πότε να εκτελείτε μια συνάρτηση.
Ας υποθέσουμε ότι θέλετε να κάνετε έναν υπολογισμό και μετά να εμφανίσετε το αποτέλεσμα.
Θα μπορούσατε να καλέσετε μια συνάρτηση αριθμομηχανής (myCalculator), να αποθηκεύσετε το αποτέλεσμα, και μετά καλέστε μια άλλη συνάρτηση (myDisplayer) για να εμφανίσετε το αποτέλεσμα:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
</script>
</body>
</html>
Εναλλακτικά, μπορείτε να καλέσετε μια συνάρτηση αριθμομηχανής (myCalculator), και αφήστε τη συνάρτηση αριθμομηχανής να καλέσει τη λειτουργία εμφάνισης (myDisplayer):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
Το πρόβλημα με το πρώτο παράδειγμα παραπάνω, είναι ότι πρέπει να καλέσετε δύο συναρτήσεις για να εμφανίσετε το αποτέλεσμα.
Το πρόβλημα με το δεύτερο παράδειγμα, είναι ότι δεν μπορείτε να αποτρέψετε τη λειτουργία αριθμομηχανής εμφανίζοντας το αποτέλεσμα.
Τώρα είναι ώρα να φέρετε μια επανάκληση.
Μια επιστροφή κλήσης είναι μια συνάρτηση που μεταβιβάζεται ως όρισμα σε μια άλλη συνάρτηση.
Χρησιμοποιώντας μια επανάκληση, θα μπορούσατε να καλέσετε τη συνάρτηση αριθμομηχανής (myCalculator) με μια επανάκληση (myCallback) και αφήστε τη λειτουργία αριθμομηχανής να εκτελέσει την επανάκληση αφού ολοκληρωθεί ο υπολογισμός:
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
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() ως όρισμα.
Όταν μεταβιβάζετε μια συνάρτηση ως όρισμα, θυμηθείτε να μην χρησιμοποιείτε παρενθέσεις.
Δεξιά: myCalculator(5, 5, myDisplayer);
Λάθος: myCalculator(5, 5, myDisplayer());
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
Στο παραπάνω παράδειγμα, το (x) => x >= 0 είναι μια συνάρτηση επανάκλησης.
Μεταβιβάζεται στο removeNeg() ως όρισμα.
Τα παραπάνω παραδείγματα δεν είναι πολύ συναρπαστικά.
Είναι απλοποιημένα για να σας διδάξουν τη σύνταξη επανάκλησης.
Εκεί που οι επανακλήσεις λάμπουν πραγματικά είναι στις ασύγχρονες συναρτήσεις, όπου μια συνάρτηση πρέπει να περιμένει για μια άλλη συνάρτηση (όπως η αναμονή για τη φόρτωση ενός αρχείου).
Οι ασύγχρονες συναρτήσεις καλύπτονται στο επόμενο κεφάλαιο.