JavaScript如何避免input的click事件重复触发？求最优实现方案

问题背景 #

我刚接触JavaScript，想实现点击id为trigger的输入框时触发计时功能，把计时内容显示在id为countdown的输入框中。但每次点击该输入框，计时函数都会重复触发，尝试用event.preventDefault();无效，后来改成在onclick事件里执行this.onclick=null;实现了单次触发，但不确定这是不是最优方案，希望得到帮助。

初始尝试代码 #

JavaScript

$('#trigger').on("click", function(e) {
  e.preventDefault();
  var timeleft = 1;
  var downloadTimer = setInterval(function(){ 
    document.getElementById('countdown').value = `${timeleft} seconds`;
    timeleft += 1;
  }, 1000);
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="trigger" class="form-control" required>
<input type="text" id="countdown" class="form-control" required>

修改后的代码 #

JavaScript

function myFunction() {
  var timeleft = 1;
  var downloadTimer = setInterval(function() {
    document.getElementById('countdown').value = `${timeleft} seconds`;
    timeleft += 1;
  }, 1000);
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="trigger" onclick="myFunction(); this.onclick=null;" class="form-control" required>
<input type="text" id="countdown" class="form-control" required>

优化方案推荐 #

你的修改方案确实能实现单次触发，但属于HTML与JS耦合的内联事件写法，不利于代码维护和后续扩展。推荐两种更符合前端最佳实践的方案：

方案1：使用jQuery的.one()方法

.one()方法会为元素绑定一次性事件，触发后自动解绑事件，完美适配单次触发的场景：

$(function() {
  $('#trigger').one('click', function() {
    let timeleft = 1;
    const downloadTimer = setInterval(() => {
      $('#countdown').val(`${timeleft} seconds`);
      timeleft++;
    }, 1000);
    
    // 可选：如果需要后续停止计时，可将定时器实例存到元素的data属性中
    // $(this).data('timer', downloadTimer);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="trigger" class="form-control" required>
<input type="text" id="countdown" class="form-control" required>

方案2：用状态变量控制触发逻辑

这种方式更灵活，若后续需要重置计时、暂停计时等功能，只需修改状态变量即可：

$(function() {
  let isTimerRunning = false;
  let downloadTimer = null;
  
  $('#trigger').on('click', function() {
    // 若计时已启动，直接返回
    if (isTimerRunning) return;
    
    isTimerRunning = true;
    let timeleft = 1;
    downloadTimer = setInterval(() => {
      $('#countdown').val(`${timeleft} seconds`);
      timeleft++;
    }, 1000);
  });
  
  // 可选：添加停止计时功能
  // $('#stop-btn').on('click', function() {
  //   clearInterval(downloadTimer);
  //   isTimerRunning = false; // 允许重新启动计时
  // });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="trigger" class="form-control" required>
<input type="text" id="countdown" class="form-control" required>
<!-- 可选添加停止按钮 -->
<!-- <button id="stop-btn">停止计时</button> -->

内容的提问来源于stack exchange，提问作者user17697342