Αποφυγή αναδρομής στη λειτουργία προβολής διαφανειών JavaScript με υποσχέσεις

Τροποποίηση της αναδρομικής συνάρτησης JavaScript για την αποφυγή υπερχείλισης στοίβας κλήσεων

JavaScript - Προσέγγιση που βασίζεται σε υποσχέσεις με βρόχο διαστήματος για αποφυγή αναδρομής

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');
  setInterval(async () => {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }
  }, duration);
}

Χρήση ασύγχρονης JavaScript χωρίς αναδρομή

JavaScript - Λύση με χρήση βρόχου με Promises και αποφυγή setInterval

const duration = 2000; // Time to display each slide in milliseconds
const sizes = [[4000, 500], [1000, 4000], [600, 400], [100, 200], [4000, 4000]];
let n = 0;
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

async function showSlides(duration) {
  const myParent = document.querySelector('#slide-div');

  while (true) {
    let sizeIndex = n++ % sizes.length;
    let w = sizes[sizeIndex][0];
    let h = sizes[sizeIndex][1];
    let myRandomizer = `https://placehold.co/${w}x${h}?text=${w}x${h}`;

    try {
      let myResponse = await fetch(myRandomizer);
      let myBlob = await myResponse.blob();
      let myUrl = URL.createObjectURL(myBlob);
      URL.revokeObjectURL(myParent.querySelector('img').src);
      myParent.querySelector('img').src = myUrl;
    } catch (error) {
      console.error('Error: ', error);
    }

    await sleep(duration);
  }
}

Συνήθεις ερωτήσεις σχετικά με την αποφυγή αναδρομής στην προβολή διαφανειών JavaScript

1. Τι είναι η αναδρομή στο JavaScript και γιατί είναι πρόβλημα στις slideshows;
2. Η αναδρομή εμφανίζεται όταν μια συνάρτηση καλεί τον εαυτό της και εάν γίνεται συνεχώς, μπορεί να οδηγήσει σε υπερχείλιση στοίβας. Σε μια παρουσίαση, αυτό θα προκαλούσε υπερβολική χρήση μνήμης και ενδέχεται να διακόψει τη λειτουργία του προγράμματος περιήγησης.
3. Πώς μπορώ να αποφύγω την αναδρομή σε μια συνάρτηση JavaScript;
4. Μία λύση είναι η χρήση setInterval ή setTimeout για να προγραμματίσετε εργασίες χωρίς αναδρομή. Μια άλλη επιλογή είναι το μοντέλο που βασίζεται σε συμβάντα, όπου οι λειτουργίες ενεργοποιούνται από συγκεκριμένα συμβάντα χρήστη ή προγράμματος περιήγησης.
5. Γιατί έκανα την προσπάθειά μου να χρησιμοποιήσω while(true) να κλειδώσω το πρόγραμμα περιήγησης;
6. Χρησιμοποιώντας while(true) χωρίς ασύγχρονη λειτουργία όπως await ή setTimeout εκτελείται σε συνεχή βρόχο χωρίς παύση, γεγονός που μπλοκάρει το κύριο νήμα, προκαλώντας το πάγωμα του προγράμματος περιήγησης.
7. Μπορώ να χρησιμοποιήσω Promises για αποφυγή υποτροπής;
8. Ναί, Promises επιτρέπουν την ασύγχρονη εκτέλεση χωρίς αναδρομικές κλήσεις συναρτήσεων. Αυτό διασφαλίζει ότι κάθε λειτουργία ολοκληρώνεται πριν ξεκινήσει η επόμενη, αποτρέποντας την υπερχείλιση στοίβας.
9. Τι είναι requestAnimationFrame και πως βοηθάει;
10. requestAnimationFrame είναι μια μέθοδος που σας επιτρέπει να δημιουργείτε ομαλές κινούμενες εικόνες συγχρονισμένες με τον ρυθμό ανανέωσης του προγράμματος περιήγησης. Είναι αποτελεσματικό και αποτρέπει τους περιττούς υπολογισμούς όταν η καρτέλα του προγράμματος περιήγησης είναι ανενεργή.

Αποφυγή αναδρομής για συνεχείς βρόχους

Αποφυγή αναδρομής σε λειτουργίες JavaScript, ιδιαίτερα κατά τη χρήση Υποσχέσεις, είναι κρίσιμο για τη διατήρηση της απόδοσης. Με τη μετάβαση σε μια προσέγγιση που βασίζεται σε βρόχο ή σε ένα μοντέλο που βασίζεται σε συμβάντα, οι προγραμματιστές μπορούν να αποτρέψουν την ατελείωτη αύξηση της στοίβας κλήσεων και να αποφύγουν τα σφάλματα του προγράμματος περιήγησης.

Χρησιμοποιώντας μεθόδους όπως setInterval ή requestAnimationFrame, καθώς και ο αποτελεσματικός χειρισμός των ασύγχρονων λειτουργιών, θα επιτρέψει την ομαλή εκτέλεση εργασιών όπως προβολές διαφανειών. Αυτές οι λύσεις προσφέρουν καλύτερη διαχείριση της μνήμης και αποτρέπουν τα ζητήματα που σχετίζονται με αναδρομικές κλήσεις συναρτήσεων, διασφαλίζοντας σταθερότητα σε μακροχρόνιες διαδικασίες.