Tombol untuk Memulai dan Menghentikan Timer di JavaScript

Sekarang mari kita buat dua tombol: saat ditekan pada tombol pertama, timer akan mulai berjalan, dan saat ditekan pada tombol kedua - berhenti. Di sini segalanya tidak akan sesederhana itu dan kita akan menghadapi jebakan. Untuk memahami inti dari jebakan ini, saya akan menjelaskan pembuatan kodenya langkah demi langkah.

Jadi, kita buat dua tombol:

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

Dapatkan referensi ke tombol-tombol ini ke dalam variabel:

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

Saat tombol pertama ditekan, mulai timer, dengan mencatat nomornya dalam variabel:

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

Dan sekarang hentikan timer saat tombol kedua ditekan:

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

// Hentikan timer:
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

Namun, jika Anda mencoba menjalankan kode di atas, kita akan mendapat kejutan: saat mencoba menghentikan timer, ternyata variabel timerId bernilai undefined! Mengapa hal ini terjadi? Karena saat menjalankan timer, kita membuat variabel timerId kita menjadi lokal di dalam fungsi yang terikat pada tombol start.

Untuk mengatasi masalah ini, mari kita buat variabel timerId menjadi global - dalam hal ini variabel tersebut akan dapat diakses baik dalam fungsi untuk memulai timer maupun dalam fungsi untuk menghentikannya:

let timerId; // buat variabel menjadi global

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

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

Misalkan diberikan sebuah variabel yang awalnya menyimpan angka 100. Diberikan juga dua tombol. Saat tombol pertama ditekan, jalankan timer, yang setiap detik akan mengurangi nilai variabel sebesar 1 dan mencetak nilai barunya ke konsol. Segera setelah nilai variabel mencapai nol - hentikan timer.

Saat tombol kedua ditekan, hentikan timer. Juga hentikan timer, jika tombol kedua tidak ditekan, tetapi nilai variabel telah mencapai nol.

Seorang programmer menulis kode yang saat tombol ditekan akan memulai timer, yang menampilkan waktu saat ini ke konsol:

<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);
});

Setelah kode dijalankan, ternyata tombol stop tidak berfungsi. Perbaiki kesalahan penulis kode.

Seorang programmer lain juga menulis kode untuk memecahkan masalah sebelumnya:

<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);
});

Setelah kode dijalankan, ternyata lagi, tombol stop tidak berfungsi. Perbaiki kesalahan penulis kode.

Seorang programmer lain juga menulis kode untuk memecahkan masalah sebelumnya:

<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);
});

Setelah kode dijalankan, ternyata lagi, tombol stop tidak berfungsi. Perbaiki kesalahan penulis kode.

Seorang programmer lain juga menulis kode untuk memecahkan masalah sebelumnya:

<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();
});

Setelah kode dijalankan, ternyata lagi, tombol stop tidak berfungsi. Perbaiki kesalahan penulis kode.

Kode yang saya berikan di bagian teori tidak memperhitungkan bahwa tombol start dapat ditekan beberapa kali. Untuk memperbaiki masalah ini, saat tombol start ditekan, kita dapat melepaskan event dari tombol ini, dan saat tombol stop ditekan - pasang kembali. Perbaiki masalahnya.