¿Puedo saber cómo puedo acelerar las acciones de marcar y desmarcar la casilla de verificación para evitar que los usuarios hagan clic en la casilla de verificación y cambien la casilla de verificación con demasiada frecuencia? ¿Cómo usar la función de aceleración para controlar la acción de marcar y desmarcar? Por ejemplo, solo cambiamos marcar y desmarcar como máximo cada 2000 ms, incluso el usuario hace clic 100 veces.
referencia: 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>Puede usar e.preventDefault() para controlar la acción de marcar/desmarcar.
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>Puede usar Date.now() y medir los milisegundos.
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" />