Nhấp nhiều lần vào nút để khởi chạy bộ đếm thời gian bằng JavaScript
Đoạn mã được tôi đưa ra ở trên, thực ra có một vấn đề nhất định. Vấn đề này biểu hiện trong trường hợp nếu nút của chúng ta bị nhấp nhiều lần. Trong trường hợp này mỗi lần nhấp sẽ dẫn đến việc khởi chạy một bộ đếm thời gian mới.
Tức là, ví dụ, ba lần nhấn vào nút sẽ dẫn đến việc ba bộ đếm thời gian được khởi chạy, và mỗi bộ đếm thời gian trong số này sẽ xuất ra giá trị bộ đếm vào console. Điều này có nghĩa là, giá trị sẽ thay đổi nhanh gấp ba lần!
Để giải quyết vấn đề đã mô tả chỉ cần làm sao để việc nhấn lặp lại vào nút không dẫn đến việc khởi chạy mới bộ đếm thời gian. Ví dụ, có thể sau khi bắt đầu bộ đếm thời gian thì gỡ bỏ trình xử lý sự kiện click đã gắn với nút:
let start = document.querySelector('#start');
start.addEventListener('click', function func() {
let i = 0;
setInterval(function() {
console.log(++i);
}, 1000);
this.removeEventListener('click', func); // gỡ bỏ trình xử lý
});
Hãy lấy giải pháp của bạn cho nhiệm vụ trước đó. Kiểm tra xem việc nhấn nhiều lần vào nút có dẫn đến việc đếm nhanh hơn không. Hãy sửa chữa vấn đề này.
