'How to throttle checkbox check & uncheck actions
May I know how can I throttle checkbox check & uncheck actions to prevent users click checkbox and change the check & uncheck too frequently? How to use the throttle function to control the check & uncheck action? For example, we only change check & uncheck at most every 2000ms even user click 100 times.
reference: https://towardsdev.com/debouncing-and-throttling-in-javascript-8862efe2b563
const throttle = (func, limit) => {
let inThrottle;
return function() {
if (!inThrottle) {
func();
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
}
}
<input type = "checkbox" id = "checkbox1">
<label for="checkAll">Checkbox 1</label>
Solution 1:[1]
You can use Date.now() and measure the milliseconds.
const c = document.getElementById("c");
const throttleMs = 500; // how much you'd like to throttle in milliseconds
let lastClick = Date.now();
c.addEventListener("change", e => {
// check if last date - current date is less than 500ms
if (Date.now() - lastClick < throttleMs) {
c.checked = !c.checked; // e.preventDefault() doesn't work for checkboxes
}
lastClick = Date.now();
});
<input type="checkbox" id="c" />
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |
