添加延遲之前的keyup（）jQuery中

Question

我已經通過了一些建議問題，閱讀激發，但我不知道究竟如何實現它們：

• (jquery/js) - get text from field on keyup, but with delay for further typing
• How to delay the .keyup() handler until the user stops typing?
• How to trigger an onkeyup event that's delayed until a user pauses their typing?

我有8個文本框，7個用於數字輸入，8​​個是總數。 即7.5 + 7.5 + 7.5 + 7.5 + 7.5 + 0.0 + 0.0 = 37.5

我有jQuery的工作，以便它監視每個文本框的keyup（）並添加所有的值並計算總和。

我決定要格式化7個文本框中的用戶輸入，以便在輸入「1」或「.1」（即「1.0」或「0.1」）時顯示爲＃。＃。

問題是我需要在格式化輸入之前添加一個延遲，我不確定我是如何使用javascript和/或jquery進行操作的。

<script type="text/javascript"> 

     $(function() { 

      var content = $('input[id*="txtMondayHours"]').val(); 
      $('input[id*="txtMondayHours"]').keyup(function() { 
       if ($('input[id*="txtMondayHours"]').val() != content) { 

        content = $('input[id*="txtMondayHours"]').val(); 
        $('input[id*="txtMondayHours"]').val((new Number($('input[id*="txtMondayHours"]').val())).toFixed(2)); 
        var hoursMon = new Number(content); 
        var hoursTue = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 
       } 
      }); 

      var content2 = $('input[id*="txtTuesdayHours"]').val(); 
      $('input[id*="txtTuesdayHours"]').keyup(function() { 
       if ($('input[id*="txtTuesdayHours"]').val() != content2) { 

        content2 = $('input[id*="txtTuesdayHours"]').val(); 
        var hoursMon = new Number(content2); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 
       } 
      }); 

      var content3 = $('input[id*="txtWednesdayHours"]').val(); 
      $('input[id*="txtWednesdayHours"]').keyup(function() { 
       if ($('input[id*="txtWednesdayHours"]').val() != content3) { 

        content3 = $('input[id*="txtWednesdayHours"]').val(); 
        var hoursMon = new Number(content3); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 
       } 
      }); 

      var content4 = $('input[id*="txtThursdayHours"]').val(); 
      $('input[id*="txtThursdayHours"]').keyup(function() { 
       if ($('input[id*="txtThursdayHours"]').val() != content4) { 

        content4 = $('input[id*="txtThursdayHours"]').val(); 
        var hoursMon = new Number(content4); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 
       } 
      }); 

      var content5 = $('input[id*="txtFridayHours"]').val(); 
      $('input[id*="txtFridayHours"]').keyup(function() { 
       if ($('input[id*="txtFridayHours"]').val() != content5) { 

        content5 = $('input[id*="txtFridayHours"]').val(); 
        var hoursMon = new Number(content5); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 
       } 
      }); 

      var content6 = $('input[id*="txtSaturdayHours"]').val(); 
      $('input[id*="txtSaturdayHours"]').keyup(function() { 
       if ($('input[id*="txtSaturdayHours"]').val() != content6) { 

        content6 = $('input[id*="txtSaturdayHours"]').val(); 
        var hoursMon = new Number(content6); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 
       } 
      }); 

      var content7 = $('input[id*="txtSundayHours"]').val(); 
      $('input[id*="txtSundayHours"]').keyup(function() { 
       if ($('input[id*="txtSundayHours"]').val() != content7) { 

        content7 = $('input[id*="txtSundayHours"]').val(); 
        var hoursMon = new Number(content7); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtTuesdayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 
       } 
      }); 

     }); 
    </script> 

理想情況下，我想解僱這一行：

$('input[id*="txtMondayHours"]').val((new Number($('input[id*="txtMondayHours"]').val())).toFixed(2)); 

指定的時間後，如100ms的

---

更新工作代碼：

---

<script type="text/javascript"> 

     var delay = (function() { 
      var timer = 0; 
      return function (callback, ms) { 
       clearTimeout(timer); 
       timer = setTimeout(callback, ms); 
      }; 
     })(); 

     $(function() { 

      var content = $('input[id*="txtMondayHours"]').val(); 
      $('input[id*="txtMondayHours"]').keyup(function() { 
       if ($('input[id*="txtMondayHours"]').val() != content) { 

        content = $('input[id*="txtMondayHours"]').val(); 
        var hoursMon = new Number(content); 
        var hoursTue = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 

        delay(function() { 
         $('input[id*="txtMondayHours"]').val((new Number($('input[id*="txtMondayHours"]').val())).toFixed(2)); 
        }, 750); 
       } 
      }); 

      var content2 = $('input[id*="txtTuesdayHours"]').val(); 
      $('input[id*="txtTuesdayHours"]').keyup(function() { 
       if ($('input[id*="txtTuesdayHours"]').val() != content2) { 

        content2 = $('input[id*="txtTuesdayHours"]').val(); 
        var hoursMon = new Number(content2); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 

        delay(function() { 
         $('input[id*="txtTuesdayHours"]').val((new Number($('input[id*="txtTuesdayHours"]').val())).toFixed(2)); 
        }, 750); 
       } 
      }); 

      var content3 = $('input[id*="txtWednesdayHours"]').val(); 
      $('input[id*="txtWednesdayHours"]').keyup(function() { 
       if ($('input[id*="txtWednesdayHours"]').val() != content3) { 

        content3 = $('input[id*="txtWednesdayHours"]').val(); 
        var hoursMon = new Number(content3); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 

        delay(function() { 
         $('input[id*="txtWednesdayHours"]').val((new Number($('input[id*="txtWednesdayHours"]').val())).toFixed(2)); 
        }, 750); 
       } 
      }); 

      var content4 = $('input[id*="txtThursdayHours"]').val(); 
      $('input[id*="txtThursdayHours"]').keyup(function() { 
       if ($('input[id*="txtThursdayHours"]').val() != content4) { 

        content4 = $('input[id*="txtThursdayHours"]').val(); 
        var hoursMon = new Number(content4); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 

        delay(function() { 
         $('input[id*="txtThursdayHours"]').val((new Number($('input[id*="txtThursdayHours"]').val())).toFixed(2)); 
        }, 750); 
       } 
      }); 

      var content5 = $('input[id*="txtFridayHours"]').val(); 
      $('input[id*="txtFridayHours"]').keyup(function() { 
       if ($('input[id*="txtFridayHours"]').val() != content5) { 

        content5 = $('input[id*="txtFridayHours"]').val(); 
        var hoursMon = new Number(content5); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 

        delay(function() { 
         $('input[id*="txtFridayHours"]').val((new Number($('input[id*="txtFridayHours"]').val())).toFixed(2)); 
        }, 750); 
       } 
      }); 

      var content6 = $('input[id*="txtSaturdayHours"]').val(); 
      $('input[id*="txtSaturdayHours"]').keyup(function() { 
       if ($('input[id*="txtSaturdayHours"]').val() != content6) { 

        content6 = $('input[id*="txtSaturdayHours"]').val(); 
        var hoursMon = new Number(content6); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtTuesdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtSundayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 

        delay(function() { 
         $('input[id*="txtSaturdayHours"]').val((new Number($('input[id*="txtSaturdayHours"]').val())).toFixed(2)); 
        }, 750); 
       } 
      }); 

      var content7 = $('input[id*="txtSundayHours"]').val(); 
      $('input[id*="txtSundayHours"]').keyup(function() { 
       if ($('input[id*="txtSundayHours"]').val() != content7) { 

        content7 = $('input[id*="txtSundayHours"]').val(); 
        var hoursMon = new Number(content7); 
        var hoursTue = new Number($('input[id*="txtMondayHours"]').val()); 
        var hoursWed = new Number($('input[id*="txtWednesdayHours"]').val()); 
        var hoursThu = new Number($('input[id*="txtThursdayHours"]').val()); 
        var hoursFri = new Number($('input[id*="txtFridayHours"]').val()); 
        var hoursSat = new Number($('input[id*="txtSaturdayHours"]').val()); 
        var hoursSun = new Number($('input[id*="txtTuesdayHours"]').val()); 

        $('input[id*="txtTotalWorkingHours"]').val(parseFloat(hoursMon.toFixed(2)) + parseFloat(hoursTue.toFixed(2)) + parseFloat(hoursWed.toFixed(2)) + parseFloat(hoursThu.toFixed(2)) + parseFloat(hoursFri.toFixed(2)) + parseFloat(hoursSat.toFixed(2)) + parseFloat(hoursSun.toFixed(2))); 

        delay(function() { 
         $('input[id*="txtSundayHours"]').val((new Number($('input[id*="txtSundayHours"]').val())).toFixed(2)); 
        }, 750); 
       } 
      }); 

     }); 
    </script> 

Answer 1

把你的代碼中的超時。然後在後續的1 keyup事件中，清除超時並重置它。

這就是這個人做How to delay the .keyup() handler until the user stops typing?

Answer 2

您可以使用underscore.js庫的debounce function。

Answer 3

使用Ben Alman的jQuery油門/去抖動：http://benalman.com/projects/jquery-throttle-debounce-plugin/。