Κουμπιά για εκκίνηση και διακοπή χρονομέτρου σε JavaScript

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

Λοιπόν, δημιουργούμε δύο μικρά κουμπιά:

<button id="start">start</button>
<button id="stop">stop</button>

Παίρνουμε αναφορές σε αυτά τα κουμπιά σε μεταβλητές:

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

Με το πάτημα στο πρώτο κουμπί ξεκινάμε το χρονομέτρο, αποθηκεύοντας τον αριθμό του σε μια μεταβλητή:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

Και τώρα ας σταματήσουμε το χρονομέτρο με το πάτημα στο δεύτερο κουμπί:

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

// Σταματάμε το χρονομέτρο:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Ωστόσο, αν προσπαθήσετε να εκτελέσετε τον παραπάνω κώδικα, σας περιμένει μια έκπληξη: κατά την προσπάθεια διακοπής του χρονομέτρου αποδεικνύεται ότι η μεταβλητή timerId είναι ίση με undefined! Γιατί συνέβη αυτό; Επειδή κατά την εκκίνηση του χρονομέτρου κάναμε τη μεταβλητή timerId τοπική μέσα στη συνάρτηση που είναι δεμένη στο κουμπί start.

Για να λύσουμε το πρόβλημα, ας κάνουμε τη μεταβλητή timerId καθολική - σε αυτήν την περίπτωση θα είναι προσβάσιμη τόσο στη συνάρτηση εκκίνησης του χρονομέτρου, όσο και στη συνάρτηση διακοπής:

let timerId; // κάνουμε τη μεταβλητή καθολική

start.addEventListener('click', function() {
	timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Ας υποθέσουμε ότι δίνεται μια μεταβλητή, στην οποία αρχικά αποθηκεύεται ο αριθμός 100. Δίνονται επίσης δύο κουμπιά. Με το πάτημα στο πρώτο κουμπί ξεκινήστε ένα χρονομέτρο που κάθε δευτερόλεπτο θα μειώνει την τιμή της μεταβλητής κατά 1 και θα εκτυπώνει τη νέα τιμή στην κονσόλα. Μόλις η τιμή της μεταβλητής φτάσει το μηδέν - σταματήστε το χρονομέτρο.

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

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

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Μετά την εκκίνηση του κώδικα, ωστόσο, αποδείχθηκε ότι το κουμπί διακοπής δεν λειτουργεί. Διορθώστε το σφάλμα του δημιουργού του κώδικα.

Ένας άλλος προγραμματιστής έγραψε επίσης κώδικα για την επίλυση του προηγούμενου προβλήματος:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Μετά την εκκίνηση του κώδικα, ωστόσο, και πάλι αποδείχθηκε, ότι το κουμπί διακοπής δεν λειτουργεί. Διορθώστε το σφάλμα του δημιουργού του κώδικα.

Ένας άλλος προγραμματιστής έγραψε επίσης κώδικα για την επίλυση του προηγούμενου προβλήματος:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Ένας άλλος προγραμματιστής έγραψε επίσης κώδικα για την επίλυση του προηγούμενου προβλήματος:

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval();
});

Ο κώδικας που παρέδωσα στο θεωρητικό μέρος δεν λαμβάνει υπόψη ότι το κουμπί start μπορεί να πατηθεί πολλές φορές. Για τη διόρθωση αυτού του προβλήματος, μπορούμε με το πάτημα στο κουμπί start να αποδεσμεύσουμε το συμβάν από αυτό το κουμπί, και με το πάτημα στο κουμπί stop - να το επαναδέσμευουμε. Διορθώστε το πρόβλημα.