Nút khởi động và dừng bộ đếm thời gian trong JavaScript
Bây giờ hãy tạo hai nút: khi nhấp vào nút đầu tiên, bộ đếm thời gian sẽ khởi động, còn khi nhấp vào nút thứ hai - nó sẽ dừng lại. Ở đây mọi thứ sẽ không đơn giản như vậy và chúng ta sẽ gặp phải một vấn đề. Để hiểu bản chất của vấn đề này, tôi sẽ mô tả việc tạo mã theo từng bước.
Vậy, chúng ta tạo hai nút nhỏ:
<button id="start">start</button>
<button id="stop">stop</button>
Lấy tham chiếu đến các nút này vào các biến:
let start = document.querySelector('#start');
let stop = document.querySelector('#stop');
Khi nhấp vào nút đầu tiên, chúng ta khởi động bộ đếm thời gian, lưu số ID của nó vào một biến:
start.addEventListener('click', function() {
let timerId = setInterval(function() {
console.log('!')
}, 1000);
});
Và bây giờ chúng ta dừng bộ đếm thời gian khi nhấp vào nút thứ hai:
start.addEventListener('click', function() {
let timerId = setInterval(function() {
console.log('!')
}, 1000);
});
// Dừng bộ đếm thời gian:
stop.addEventListener('click', function() {
clearInterval(timerId);
});
Tuy nhiên, nếu bạn thử chạy đoạn mã trên,
chúng ta sẽ gặp bất ngờ: khi cố gắng dừng
bộ đếm thời gian, hóa ra biến timerId
bằng undefined! Tại sao lại như vậy?
Bởi vì khi khởi động bộ đếm thời gian, chúng ta đã biến
biến timerId của mình thành biến cục bộ bên trong
hàm được gắn vào nút start.
Để giải quyết vấn đề, hãy biến biến timerId
thành biến toàn cục - trong trường hợp này, nó sẽ có thể truy cập
được cả trong hàm khởi động bộ đếm thời gian và trong hàm
dừng:
let timerId; // biến biến thành toàn cục
start.addEventListener('click', function() {
timerId = setInterval(function() {
console.log('!')
}, 1000);
});
stop.addEventListener('click', function() {
clearInterval(timerId);
});
Giả sử có một biến, ban đầu
lưu số 100. Cũng có hai
nút. Khi nhấp vào nút đầu tiên, hãy khởi động
bộ đếm thời gian, mỗi giây sẽ giảm
giá trị của biến đi 1 và in
giá trị mới ra console. Ngay khi giá trị
của biến đạt đến 0 - hãy dừng bộ đếm thời gian.
Khi nhấp vào nút thứ hai, hãy dừng bộ đếm thời gian. Đồng thời dừng bộ đếm thời gian nếu nút thứ hai không được nhấp, nhưng giá trị của biến đã đạt đến 0.
Một lập trình viên nào đó đã viết mã, khi nhấp vào nút sẽ khởi động bộ đếm thời gian, in ra console thời điểm hiện tại:
<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);
});
Tuy nhiên, sau khi chạy mã, hóa ra nút dừng không hoạt động. Hãy sửa lỗi của tác giả mã.
Một lập trình viên khác cũng đã viết mã để giải quyết bài toán trước:
<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);
});
Tuy nhiên, sau khi chạy mã, lại hóa ra, nút dừng không hoạt động. Hãy sửa lỗi của tác giả mã.
Một lập trình viên khác cũng đã viết mã để giải quyết bài toán trước:
<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);
});
Tuy nhiên, sau khi chạy mã, lại hóa ra, nút dừng không hoạt động. Hãy sửa lỗi của tác giả mã.
Một lập trình viên khác cũng đã viết mã để giải quyết bài toán trước:
<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();
});
Tuy nhiên, sau khi chạy mã, lại hóa ra, nút dừng không hoạt động. Hãy sửa lỗi của tác giả mã.
Đoạn mã tôi đưa ra trong phần lý thuyết không tính đến việc có thể nhấp vào nút start nhiều lần. Để sửa chữa vấn đề này, có thể khi nhấp vào nút start, hãy gỡ sự kiện khỏi nút đó, và khi nhấp vào nút stop - gắn lại sự kiện. Hãy sửa vấn đề này.
