Fire event on radio group after some time delay

Question

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.

Answer 1

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>