JavaScript mermiliki 2 buah fungsi timer yaitu setTimeout dan setInterval. setTimeout hanya dieksekusi 1 kali selama rentang waktu yang ditentukan, sedangkan setInterval dieksekusi berkali-kali selama rentang waktu yang ditentukan.
setTimeout
setTimeout(function () {
console.log('Hello');
}, 5000); // interval waktu dalam milidetik untuk mengeksekusi fungsi
console.log('Waitng...'); // kode ini akan ditampilkan lebih dahulu
Argumen fungsi pada setTimeout juga bisa diisi.
setTimeout(
function (par1, par2) {
console.log(`Here is ${par1} and ${par2}`);
}, 1000, 'hammer', 'nail');
Membatalkan setTimeout dengan clearTimeout. clearTimeout membutuhkan argumen yaitu setTimeout yang akan dibatalkan, oleh karenanya dalam penggunaan clearTimeout, setTimeout harus disimpan dalam sebuah variabel.
const tool = function () {
setTimeout((par1, par2) => console.log(`The tools: ${par1} and ${par2}`), 5000, ...par); // kode ini akan disimpan dalam register dan menunggu 5 detik untuk diekseskusi
};
const par = ['jigsaw', 'welder'];
tool();
console.log('Waiting...');
if (par.includes('jigsaw')) {
clearTimeout(tool);
console.log('setTimeout telah dibatalkan');
}
setInterval
setInterval(function () {
const now = new Date();
console.log(now.getSeconds()); // menampilkan nilai detik dari date
}, 1000); // dieksekusi setiap 1000 milidetik (1 detik)
setIntervaldengan parameter
setInterval(
function (par1, par2) {
const now = new Date();
console.log(`${par1} dan ${par2}`, now.getSeconds());
}, 1000,'hammer', 'jigsaw');
Membuat Timer dan Counter
Kita akan membuat sebuah aplikasi timer dan counter dengan memanfaatkan setIntervaldan clearInterval. Sebelumnya buatlah file html sederhana dengan 2 buah tombol. Saya membuatnya secara online dengan JSFiddle.
Timer
const btnStart = document.querySelector('.btnStart');
const btnStop = document.querySelector('.btnStop');
const text = document.querySelector('.text');
let startTimer; // variabel panampung setInterval harus berada pada global window object
btnStart.addEventListener('click', function () {
startTimer = setInterval(function () {
const now = new Date();
text.textContent = `${now.getMinutes()}:${now.getSeconds()}`;
console.log(`${now.getMinutes()}:${now.getSeconds()}`);
}, 1000);
});
btnStop.addEventListener('click', function () {
clearInterval(startTimer); // membersihkan variabel startTimer
text.textContent = 'Timer Stop';
console.log('Timer Stop');
});
Counter
const btnStart = document.querySelector('.btnStart');
const btnStop = document.querySelector('.btnStop');
const text = document.querySelector('.text');
let startTimer;
btnStart.addEventListener('click', function () {
let time1 = 10;
startTimer = setInterval(function () {
text.textContent = `${time1}`;
console.log(time1);
if (time1 === 0) {
clearInterval(startTimer);
text.textContent = 'Timer Stop';
}
time1--;
}, 1000);
});
btnStop.addEventListener('click', function () {
clearInterval(startTimer);
text.textContent = 'Timer Stop';
});
Note: video terakhir yang saya upload hasilnya kurang sempurna, silahkan dicoba sendiri kodenya
Top comments (0)