在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

您可以使用underscore.js图书馆的debounce function。

Answer 2

将代码置于超时状态。然后在随后的1 keyup个事件中，清除超时并重置它。

这就是这个人正在做的How to delay the .keyup() handler until the user stops typing?

Answer 3

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