Συμβάντα χρονισμού JavaScript: setTimeout και setInterval

Οι προγραμματιστές χρησιμοποιούν συμβάντα χρονισμού για να καθυστερήσουν την εκτέλεση συγκεκριμένου κώδικα ή για να επαναλάβουν τον κώδικα σε ένα συγκεκριμένο διάστημα.

Υπάρχουν δύο εγγενείς συναρτήσεις στη βιβλιοθήκη JavaScript που χρησιμοποιούνται για την εκτέλεση αυτών των εργασιών: setTimeout()και setInterval().

setTimeout

setTimeout() χρησιμοποιείται για να καθυστερήσει την εκτέλεση της συντελεστή που έχει περάσει κατά καθορισμένο χρονικό διάστημα.

Υπάρχουν δύο παράμετροι στις οποίες μεταβείτε setTimeout(): η συνάρτηση στην οποία θέλετε να καλέσετε και ο χρόνος σε χιλιοστά του δευτερολέπτου για να καθυστερήσετε την εκτέλεση της συνάρτησης.

Θυμηθείτε ότι υπάρχουν 1000 χιλιοστά του δευτερολέπτου (ms) σε 1 δευτερόλεπτο, οπότε 5000 ms ισούται με 5 δευτερόλεπτα.

setTimeout() θα εκτελέσει τη συνάρτηση από το πρώτο όρισμα μία φορά μετά την παρέλευση του καθορισμένου χρόνου.

Παράδειγμα:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); }

Όταν delayTimerκαλείται η συνάρτηση, θα εκτελεστεί setTimeout. Μετά από 3 δευτερόλεπτα (3000 ms), θα εκτελεστεί το delayedFunctionοποίο θα στείλει μια ειδοποίηση.

setInterval

Χρησιμοποιήστε το setInterval()για να καθορίσετε μια συνάρτηση που θα επαναληφθεί με χρονική καθυστέρηση μεταξύ των εκτελέσεων.

Και πάλι, δύο παράμετροι μεταβιβάζονται setInterval(): τη συνάρτηση στην οποία θέλετε να καλέσετε και το χρονικό διάστημα σε χιλιοστά του δευτερολέπτου για να καθυστερήσετε κάθε κλήση της συνάρτησης.

setInterval() θα συνεχίσει να εκτελείται έως ότου εκκαθαριστεί.

Παράδειγμα:

let intervalID; function repeatEverySecond() { intervalID = setInterval(sendMessage, 1000); } function sendMessage() { console.log(“One second elapsed.”); }

Όταν ο κωδικός σας καλεί τη λειτουργία repeatEverySecondθα εκτελεστεί setInterval. setIntervalθα εκτελεί τη λειτουργία sendMessageκάθε δευτερόλεπτο (1000 ms).

clearTimeout και clearInterval

Υπάρχουν επίσης αντίστοιχες εγγενείς λειτουργίες για τη διακοπή των συμβάντων χρονισμού: clearTimeout()και clearInterval().

Ίσως έχετε παρατηρήσει ότι κάθε συνάρτηση χρονοδιακόπτη αποθηκεύεται σε μια μεταβλητή. Όταν είτε το setTimeoutή setIntervalλειτουργία τρέχει, αυτό αντιστοιχεί ένας αριθμός που είναι αποθηκευμένο σε αυτή την μεταβλητή. Σημειώστε ότι η JavaScript κάνει όλα αυτά στο παρασκήνιο.

Αυτός ο αριθμός που δημιουργείται είναι μοναδικός για κάθε παρουσία χρονόμετρων. Αυτός ο εκχωρημένος αριθμός είναι επίσης ο τρόπος αναγνώρισης των χρονομετρητών όταν θέλετε να τους σταματήσετε. Για αυτόν τον λόγο, πρέπει πάντα να ρυθμίζετε το χρονόμετρο σε μια μεταβλητή.

Για λόγους σαφήνειας του κωδικού σας, θα πρέπει πάντα να ταιριάζει clearTimeout()με setTimeout()και clearInterval()να setInterval().

Για να σταματήσετε ένα χρονοδιακόπτη, καλέστε την αντίστοιχη διαγραφή λειτουργίας και μεταδώστε τη μεταβλητή ID χρονοδιακόπτη που ταιριάζει με το χρονόμετρο που θέλετε να σταματήσετε. Η σύνταξη για clearInterval()και clearTimeout()είναι τα ίδια.

Παράδειγμα:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); } function clearAlert() { clearTimeout(timeoutID); }