Search code examples
javascriptcheckboxthrottling

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

  • You can use e.preventDefault() to control the check/uncheck action.

    const throttle = (func, limit) => {
      let inThrottle;
      
      return function(e) {
        if (inThrottle) {
          return e.preventDefault();  // Prevents check/uncheck of the input
        }
        
        func();
        inThrottle = true;
        setTimeout(() => inThrottle = false, limit);
      }
    }
    
    function clickHandler() {}
    
    document.getElementById("checkbox1").addEventListener("click", throttle(clickHandler, 2000))
    <input type = "checkbox" id = "checkbox1">
    <label for="checkAll">Checkbox 1 (Can only be changed every 2s)</label>