延迟一段时间后无线电组发生火灾事件

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>

我希望 oninput 只在广播组中没有 activity 的情况下，比方说 5 秒后触发。

Answer 1

您可以使用 setTimeout():

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

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

Answer 2

OP 需要选择一种结合 event-delegation and thedebounced 处理 callback-function 的方法。

要求是 radio-group 需要完全嵌套在发生 event-delegation 的 parent-structure 中（如果不止一个，则为每个）。每个 delegation-node 的原因都需要将自己的去抖 event-handler 注册到其相关的 input 事件中。

此外，强烈建议重构 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>

延迟一段时间后无线电组发生火灾事件

Fire event on radio group after some time delay

javascript

event-handling

dom-events

event-delegation

debouncing