Estoy buscando una solución para permitir que un evento se active en un grupo de radio después de un tiempo de retraso.
Específicamente, necesito hacer una pregunta a los usuarios y quiero enviar su entrada sin que los usuarios hagan clic en un botón separado. Al mismo tiempo, será posible que el usuario haga clic en diferentes botones de radio mientras considera la respuesta.
onInput y onChange se activan inmediatamente después de que un usuario haga clic. Sin embargo, ¿hay otra solución?
Aquí hay un pequeño ejemplo:
<div class="form-check form-check-inline"> <label> What is 17 * 21? </label> <br></br> <input class="form-check-input" type="radio" id="MC_0" name="MC_first" value="1" oninput="console.log('here');"> <label for="MC_0" class="form-check-label">263</label> <input class="form-check-input" type="radio" id="MC_1" name="MC_first" value="2" oninput="console.log('here');"> <label for="MC_1" class="form-check-label">357</label> </div> Me encantaría que oninput solo dispare después de, digamos, 5 segundos sin actividad en este grupo de radio.
Puedes usar setTimeout() :
var timer; function setTimer(time) { if (timer) { clearTimeout(timer); } timer = setTimeout(() => { console.log('abc'); }, time); } <button onclick="setTimer(2000)">Click Me</button>El OP debe elegir un enfoque que combine la delegación de eventos y el manejo de debounced de una función de devolución de llamada.
Los requisitos son que un grupo de radio (o cada uno en el caso de más de uno) debe estar completamente anidado dentro de una estructura principal donde tiene lugar la delegación del evento. Y cada nodo de delegación de causa debe tener su propio controlador de eventos de rebote registrado en su evento de input relacionado.
Además, se recomienda encarecidamente una refactorización del marcado del OP.
function handleRadioGroupInput(evt) { const { target } = evt; console.log({ target }); } document .querySelectorAll('fieldset') .forEach(elmNode => elmNode // each radio-group parent has to register its own debounced handler. .addEventListener('input', _.debounce(handleRadioGroupInput, 3000)) ); body { margin: 0; } fieldset { float: left; width: 40%; } .as-console-wrapper { max-height: 140px!important; } <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> <fieldset class="form-check form-check-inline"> <legend> What is 17 * 21? </legend> <input class="form-check-input" type="radio" id="MC_0" name="MC_first" value="1"> <label for="MC_0" class="form-check-label">263</label> <input class="form-check-input" type="radio" id="MC_1" name="MC_first" value="2"> <label for="MC_1" class="form-check-label">357</label> </fieldset> <fieldset class="form-check form-check-inline"> <legend> What is 7 * 22? </legend> <input class="form-check-input" type="radio" id="MC_2" name="MC_second" value="1"> <label for="MC_2" class="form-check-label">154</label> <input class="form-check-input" type="radio" id="MC_3" name="MC_second" value="2"> <label for="MC_3" class="form-check-label">144</label> </fieldset>