I am searching for a solution to let an event fire on a radio group after some time delay.
Specifically, I need to ask users a question and want to submit their input without having the users click a separate button. At the same time, it shall be possible that the user clicks different radio buttons while considering the answer.
onInput and onChange are both fired immediately after a user click. However, is there another solution?
Here is small example:
<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>
I would love to have oninput only fire after, say, 5 seconds without activity in this radio group.
You can use setTimeout():
var timer;
function setTimer(time) {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => { console.log('abc'); }, time);
}<button onclick="setTimer(2000)">Click Me</button>The OP needs to choose an approach which combines event-delegation and thedebounced handling of a callback-function.
The requirements are that a (or each in case of more than just one) radio-group needs to be entirely nested within a parent-structure where the event-delegation takes place. And each delegation-node of cause needs to have its own debounced event-handler registered to its related input-event.
Additionally a refactoring of the OP's markup is strongly recommended.
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>