Βασικές αρχές εργασίας με τη συνάρτηση setInterval στο JavaScript

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

Για την εργασία με χρονοδιακόπτες στο JavaScript χρησιμοποιείται η συνάρτηση setInterval, η οποία εκκινεί τον καθορισμένο κώδικα σε καθορισμένα χρονικά διαστήματα.

Αυτή η συνάρτηση λειτουργεί ως εξής: ως πρώτη παράμετρο δέχεται τον πηγαίο κώδικα μιας συνάρτησης, και ως δεύτερη παράμετρο - το διάστημα, με το οποίο αυτή η συνάρτηση θα καλείται αυτόματα. Η δεύτερη παράμετρος ορίζεται σε χιλιοστά του δευτερολέπτου (1000 χιλιοστά του δευτερολέπτου = 1 δευτερόλεπτο).

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

Αρχικά, ας φτιάξουμε μια συνάρτηση, που να εκτυπώνει κάτι στην κονσόλα:

function timer() {
	console.log('!');
}

Και τώρα χρησιμοποιώντας την setInterval ας κάνουμε τη συνάρτηση που δημιουργήσαμε να εκτελείται κάθε δευτερόλεπτο:

setInterval(timer, 1000);

function timer() {
	console.log('!');
}

Δεν είναι απαραίτητο να δημιουργήσετε ξεχωριστή συνάρτηση - μπορείτε απλά στην πρώτη παράμετρο της setInterval να περάσετε μια ανώνυμη συνάρτηση, ως εξής:

setInterval(function() {
	console.log('!');
}, 1000);

Εκκινήστε έναν χρονοδιακόπτη, ο οποίος κάθε 3 δευτερόλεπτα θα εκτυπώνει κάτι στην κονσόλα.