Στο JavaScript, υπάρχουν περιπτώσεις όπου πρέπει να διασφαλίσουμε ότι το περιεχόμενο που εισάγεται σε έναν συγκεκριμένο ιστότοπο είναι ακριβές και ενημερωμένο. Για παράδειγμα, απαιτείται η εμφάνιση του πιο πρόσφατου περιεχομένου σε μια ιστοσελίδα ενώ συμπληρώνετε μια εκτενή φόρμα και παρατηρείτε τις νέες αλλαγές ή όταν θέλετε να δοκιμάσετε έναν ιστότοπο. Σε τέτοιες περιπτώσεις, η αυτόματη ανανέωση μιας ιστοσελίδας κάθε 5 δευτερόλεπτα χρησιμοποιώντας JavaScript είναι πολύ χρήσιμη για την αντιμετώπιση αυτού του τύπου καταστάσεων.
Αυτό το άρθρο θα συζητήσει τις μεθόδους αυτόματης ανανέωσης μιας ιστοσελίδας κάθε 5 δευτερόλεπτα χρησιμοποιώντας JavaScript.
Πώς να ανανεώνετε αυτόματα την ιστοσελίδα κάθε 5 δευτερόλεπτα χρησιμοποιώντας JavaScript;
Για την αυτόματη ανανέωση μιας ιστοσελίδας κάθε 5 δευτερόλεπτα χρησιμοποιώντας JavaScript, μπορούν να χρησιμοποιηθούν οι ακόλουθες προσεγγίσεις:
- ' setInterval() ' και ' document.querySelector() μεθόδους
- ' φρεσκάρω() 'μέθοδος
- ' setTimeout() 'μέθοδος
Ανατρέξτε στις μεθόδους που συζητήθηκαν μία προς μία!
Μέθοδος 1: Αυτόματη ανανέωση ιστοσελίδας κάθε 5 δευτερόλεπτα σε JavaScript με χρήση μεθόδων setInterval() και document.querySelector()
Ο ' setInterval() Η μέθοδος ' έχει πρόσβαση σε μια συνάρτηση σε καθορισμένο χρονικό διάστημα και το ' document.querySelector() Η μέθοδος λαμβάνει το πρώτο στοιχείο που ταιριάζει με έναν επιλογέα CSS. Αυτές οι μέθοδοι μπορούν να χρησιμοποιηθούν σε συνδυασμό για πρόσβαση στη συγκεκριμένη ετικέτα επικεφαλίδας και ρύθμιση του χρονικού διαστήματος σε μια απαιτούμενη λειτουργικότητα με τη βοήθεια ενός χρονοδιακόπτη.
Σύνταξη
setInterval ( συνάρτηση, χιλιοστά του δευτερολέπτου, παρ1, παρ2 )Στην παραπάνω σύνταξη, ' λειτουργία ' αναφέρεται στη λειτουργία που πρέπει να προσπελαστεί, ' χιλιοστά του δευτερολέπτου ' είναι το συγκεκριμένο χρονικό διάστημα που πρέπει να εκτελεστεί και ' ζεύγος 1 ' και ' παρ2 ” είναι οι πρόσθετες παράμετροι.
έγγραφο. querySelector ( CSS επιλογείς )
Εδώ, ' Επιλογείς CSS ” αντιπροσωπεύουν έναν ή περισσότερους από έναν επιλογείς CSS.
Δείτε το παρακάτω παράδειγμα.
Παράδειγμα
Πρώτα, καθορίστε έναν τίτλο και μια επικεφαλίδα στις ετικέτες
, αντίστοιχα:
< τίτλος > Ανανέωση σελίδας κάθε 5 δευτερόλεπτα < / τίτλος >
< h2 στυλ = 'text-align: left' > Αυτόματη ανανέωση της σελίδας < / h2 >
Τώρα, ορίστε μια τιμή χρονοδιακόπτη ως ' 1 ”:
αφήστε χρονόμετρο = 1 ;Μετά από αυτό, εφαρμόστε το ' setInterval() 'μέθοδος με ' 1000 ms ' αξία. Αυτό θα αυξάνει το χρονόμετρο κάθε δευτερόλεπτο. Επίσης, αποκτήστε πρόσβαση στην καθορισμένη επικεφαλίδα για να την εμφανίσετε στο ' Μοντέλο αντικειμένου εγγράφου (DOM) ” στο τέλος της καθορισμένης τιμής χρονοδιακόπτη.
Τέλος, επαναλάβετε την τιμή του χρονοδιακόπτη με την αύξηση του ' 1 ' χρησιμοποιώντας ' ++ ' τελεστής μετά την αύξηση και εφαρμόστε μια συνθήκη με τέτοιο τρόπο ώστε εάν η τιμή υπερβαίνει το 5, η ' location.reload() Η μέθοδος ” θα έχει ως αποτέλεσμα την επαναφόρτωση του παραθύρου:
setInterval ( ( ) => {έγγραφο. querySelector ( 'h2' ) . innerText = μετρών την ώραν ;
μετρών την ώραν ++;
αν ( μετρών την ώραν > 5 )
τοποθεσία. φορτώνω πάλι ( ) ;
} , 1000 ) ;
Μπορεί να φανεί ότι η ιστοσελίδα μας ανανεώνεται αυτόματα κάθε πέντε δευτερόλεπτα:
Μέθοδος 2: Αυτόματη ανανέωση ιστοσελίδας κάθε 5 δευτερόλεπτα σε JavaScript χρησιμοποιώντας συμβάν onload
Ο ' σε φορτίο Το συμβάν ενεργοποιείται όταν έχει φορτωθεί ένα αντικείμενο. Αυτή η τεχνική μπορεί να εφαρμοστεί για την ανανέωση της σελίδας με τη βοήθεια μιας συνάρτησης που ορίζεται από το χρήστη κατά τη φόρτωση της ιστοσελίδας.
Σύνταξη
αντικείμενο. σε φορτίο = ανανέωση σελίδας ( ) { myScript } ;Στη δεδομένη σύνταξη, ' λειτουργία ” αναφέρεται στη συνάρτηση που πρέπει να κληθεί κατά τη φόρτωση του αντικειμένου.
Δείτε το παρακάτω παράδειγμα.
Παράδειγμα
Αρχικά, συμπεριλάβετε έναν τίτλο και μια επικεφαλίδα όπως συζητήθηκε στην προηγούμενη μέθοδο:
< τίτλος > Ανανέωση σελίδας κάθε 5 δευτερόλεπτα < / τίτλος >< h2 > Αυτόματη ανανέωση της σελίδας < / h2 >
Τώρα, εφαρμόστε το ' σε φορτίο 'συμβάν και κλήση της συνάρτησης' refreshPage() 'και περάστε' 5000 ' ως όρισμα που υποδεικνύει χρονικό διάστημα πέντε δευτερολέπτων:
< φορτίο σώματος = 'JavaScript:refreshPage(5000);' >σώμα >
Τέλος, ορίστε μια συνάρτηση με το όνομα ' ανανέωση () ' με ' t ” ως επιχείρημα που αναφέρεται στον καθορισμένο χρόνο για την αυτόματη ανανέωση της ιστοσελίδας. Ο ' location.reload() Η μέθοδος ' θα φορτώσει ξανά τη σελίδα μετά τον καθορισμένο χρόνο:
λειτουργία refreshPage ( t ) {setTimeout ( 'location.reload(true);' , t ) ;
}
Παραγωγή
Μέθοδος 3: Αυτόματη ανανέωση ιστοσελίδας κάθε 5 δευτερόλεπτα σε JavaScript χρησιμοποιώντας τη μέθοδο setTimeout()
Ο ' setTimeout() Η μέθοδος ” καλεί μια συνάρτηση μετά από έναν καθορισμένο καθορισμένο χρόνο. Αυτή η μέθοδος μπορεί να εφαρμοστεί για επαναφόρτωση μιας ιστοσελίδας μετά από ένα συγκεκριμένο καθορισμένο χρονικό όριο.
Σύνταξη
setTimeout ( συνάρτηση, χιλιοστά του δευτερολέπτου, παρ1, παρ2 )Στη δεδομένη σύνταξη, ' λειτουργία Το ' αναφέρεται στη λειτουργία προς πρόσβαση, ' χιλιοστά του δευτερολέπτου ' είναι το συγκεκριμένο χρονικό διάστημα που πρέπει να εκτελεστεί και ' ζεύγος 1 », « παρ2 ” είναι οι πρόσθετες παράμετροι.
Παράδειγμα
Στην ετικέτα σεναρίου της σελίδας HTML, εφαρμόστε το ' setTimeout() ' μέθοδος με τέτοιο τρόπο, όταν περάσουν 5 δευτερόλεπτα, η μέθοδος location.reload() φορτώνει ξανά την ιστοσελίδα:
< γραφή >setTimeout ( 'location.reload(true);' , 5000 ) ;
γραφή >
Παραγωγή
Έχουμε συζητήσει όλες τις βολικές μεθόδους για την αυτόματη ανανέωση μιας ιστοσελίδας κάθε 5 δευτερόλεπτα χρησιμοποιώντας JavaScript.
συμπέρασμα
Για αυτόματη ανανέωση μιας ιστοσελίδας κάθε 5 δευτερόλεπτα χρησιμοποιώντας JavaScript, χρησιμοποιήστε το ' setInterval() ' και ' document.querySelector() ' μέθοδοι για τη ρύθμιση της τιμής του χρονοδιακόπτη, το ' φρεσκάρω() ' μέθοδος για την ανανέωση μιας ιστοσελίδας ή το ' setTimeout() ” μέθοδος για τον ορισμό ενός συγκεκριμένου ορίου ανανέωσης χρονικού ορίου μιας ιστοσελίδας. Αυτό το άρθρο παρουσίασε τις μεθόδους αυτόματης ανανέωσης μιας ιστοσελίδας κάθε 5 δευτερόλεπτα χρησιμοποιώντας JavaScript.