Πώς να δημιουργήσετε ένα χρονόμετρο αντίστροφης μέτρησης

Η δημιουργία ενός απλού χρονομετρητή αντίστροφης μέτρησης είναι εύκολη με τα εγγενή συμβάντα χρονισμού της JavaScript. Μπορείτε να διαβάσετε περισσότερα σχετικά με αυτά σε αυτό το άρθρο.

Δημιουργία χρονοδιακόπτη αντίστροφης μέτρησης

Ξεκινήστε δηλώνοντας μια κενή συνάρτηση που ονομάζεται startCountdownπου παίρνει secondsως όρισμα:

function startCountdown(seconds) { };

Θέλουμε να παρακολουθούμε τα δευτερόλεπτα που περνούν μόλις ξεκινήσει ο χρονοδιακόπτης, οπότε χρησιμοποιήστε letγια να δηλώσετε μια μεταβλητή που ονομάζεται counterκαι να την ορίσετε ίση με seconds:

function startCountdown(seconds) { let counter = seconds; }

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

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(); }

Μπορείτε να μεταβιβάσετε μια συνάρτηση απευθείας setInterval, οπότε ας περάσουμε μια κενή λειτουργία βέλους ως το πρώτο όρισμα. Επίσης, θέλουμε η λειτουργία να εκτελείται κάθε δευτερόλεπτο, οπότε περάστε το 1000 ως το δεύτερο όρισμα:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { }, 1000); }

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

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; }, 1000); }

Τώρα, εάν εκτελέσετε τη λειτουργία, θα δείτε ότι λειτουργεί, αλλά δεν σταματά μία φορά counterείναι μικρότερη από 0:

startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // -1 // -2 

Για να το διορθώσετε, γράψτε πρώτα μια ifδήλωση που εκτελεί όταν counterείναι μικρότερο από 0:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { } }, 1000); }

Στη συνέχεια, μέσα στη ifδήλωση, διαγράψτε το intervalμε clearIntervalκαι καταγράψτε μια συμβολοσειρά ήχου συναγερμού στην κονσόλα:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { clearInterval(interval); console.log('Ding!'); } }, 1000); }

Εκτέλεση

Τώρα όταν ξεκινάτε το χρονόμετρο, θα πρέπει να δείτε τα εξής:

startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // Ding!

Περισσότεροι πόροι

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