ID为#lastshop的输入框keyup函数计算延迟问题求助

我有多个用于计算上次到店维修成本的输入框，其他输入框的keyup函数能实时生效，但ID为#lastshop的输入框计算结果存在延迟，需要重复输入或按回车两次才能获取正确值。例如在Invoice value框输入1000时，#lastshop应实时显示1000，实际却要操作两次才同步。以下是使用的jQuery代码与HTML结构：

原jQuery代码 #

$(document).ready(function() {
  // Get value on keyup funtion
  $("#lastshop, #invoice, #aoidisks, #aoibnv, #aoilabour, #aoival, #stolbnv, #stoldisks, #stolval,#aoilabour ")
    .keyup(
      function() {
        var aoival = 0;
        var aoilabour = 0;
        var lastshop = 0;
        var stolbnv = 0;
        var g = Number($("#lastshop").val());
        var a = Number($("#invoice").val());
        var b = Number($("#aoidisks").val());
        var c = Number($("#aoibnv").val());
        var d = Number($("#aoilabour").val());
        var e = Number($("#stolbnv").val());
        var f = Number($("#stoldisks").val());
        g = c + d + e;
        aoilabour = a - b - c;
        var aoival = aoilabour + b + c;
        $('#aoilabour').val(aoilabour);
        $('#aoival').val(aoival);
        var stolval = e + f;
        $('#stolval').val(stolval);
        $('#lastshop').val(g);
      });
});

原HTML结构 #

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<center>
  <form action="" method="post">
    <p>
      <label for="">Date</label>
    </p>
    <p>
      <input type="text" name="thedate" id="thedate" class='thedate'>
    </p>
    <p><label for="">Engine</label></p>
    <p>
      <select name="" id="">
        <option value="" selected>Select Engine</option>
        <option value="">E268509</option>
        <option value="">E268588</option>
        <option value="">E268660</option>
      </select>
    </p>
    <p><label for="">Cycles To Run</label></p>
    <p><input type="text" name="cyclestorun" id="cyclestorun"></p>
    <label for="">Invoice Value</label>
    <p>
      <input type="text" name='invoice' id='invoice' class='invoice'>
    </p>
    <p>
      <label for="">AOI Disks</label>
    </p>
    <p>
      <input type="text" name="aoidisks" id="aoidisks">
    </p>
    <p>
      <label for="">AOI B & V</label>
    </p>
    <P>
      <input type="text" name="aoibnv" id="aoibnv">
    </P>
    <p>
      <label for="">AOI Labour</label>
    </p>
    <p>
      <input type="text" name="aoilabour" id="aoilabour" readonly>
    </p>
    <p>
      <label for="">AOI Value</label>
    </p>
    <p>
      <input type="text" name="aoival" id="aoival" readonly>
    </p>
    <p>
      <label for="">Stol B & V</label>
    </p>
    <P>
      <input type="text" name="stolbnv" id="stolbnv">
    </P>
    <p>
      <label for="">Stol Disks</label>
    </p>
    <P>
      <input type="text" name="stoldisks" id="stoldisks">
    </P>
    <p>
      <label for="">Stol Value</label>
    </p>
    <P>
      <input type="text" name="stolval" id="stolval" readonly>
    </P>
    <p>
      <label for="">Cost of Last Shop Visit</label>
    </p>
    <P>
      <input type="text" name="lastshop" id="lastshop" readonly>
    </P>
  </form>
</center>

问题原因分析 #

1. 监听了只读输入框的keyup事件：#lastshop、#aoilabour等是只读输入框，程序自动更新它们的值时会触发keyup事件，导致计算逻辑重复执行。第一次更新后触发的keyup会使用旧值计算，第二次才会拿到新值，造成延迟假象。
2. 依赖旧中间值计算：计算#lastshop的变量g时，使用的是#aoilabour的旧值（d = Number($("#aoilabour").val())），而此时aoilabour = a - b - c已经算出新值却未立即使用，导致第一次计算结果错误。
3. 选择器冗余：选择器中重复写了#aoilabour，属于无效冗余代码。

修复方案 #

修改后的jQuery代码 #

$(document).ready(function() {
  // 仅监听用户可手动输入的输入框
  $("#invoice, #aoidisks, #aoibnv, #stolbnv, #stoldisks")
    .keyup(function() {
      // 处理空输入，避免NaN导致计算异常
      var a = Number($("#invoice").val() || 0);
      var b = Number($("#aoidisks").val() || 0);
      var c = Number($("#aoibnv").val() || 0);
      var e = Number($("#stolbnv").val() || 0);
      var f = Number($("#stoldisks").val() || 0);

      // 实时计算各个值，使用最新中间结果
      var aoilabour = a - b - c;
      var aoival = aoilabour + b + c;
      var stolval = e + f;
      var lastShopValue = c + aoilabour + e;

      // 更新只读输入框内容
      $('#aoilabour').val(aoilabour);
      $('#aoival').val(aoival);
      $('#stolval').val(stolval);
      $('#lastshop').val(lastShopValue);
    });
});

修复要点 #

• 移除不必要的事件监听：只保留用户可输入的输入框，避免只读输入框触发重复计算。
• 使用实时计算的中间值：直接用刚算出的aoilabour计算lastShopValue，不依赖输入框旧值，确保数据同步。
• 处理空输入场景：加入|| 0避免输入框为空时Number()返回NaN，保证计算稳定性。

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