一段时间后，广播组的火灾事件

Question

我正在寻找一种解决方案，以便在一段时间后延迟后，让事件在广播组上开火。

具体来说，我需要询问用户一个问题，并想提交他们的输入而无需让用户单击单独的按钮。同时，在考虑答案时，用户可能会单击不同的无线电按钮。

OnInput和OnChange均在用户单击后立即发射。但是，还有另一个解决方案吗？

这是一个很小的例子：

<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>

我很想拥有onutput仅在此无线电组中没有活动的5秒之后起火。

Answer 1

OP需要选择一种结合和 debounced> debounced 处理回调-功能。

要求是A（或每个在一个不仅仅是一个）射电组中需要完全嵌套在事件划分发生的父母结构中。并且每个原因的委派节点都需要在其相关INPUT -event上注册其自己的拒绝事件处理程序。

另外，强烈建议对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>

Answer 2

您可以使用settimeout（）：

var timer;
function setTimer(time) {
  if (timer) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => { console.log('abc'); }, time);
}

<button onclick="setTimer(2000)">Click Me</button>