在 jQuery 中触发 keyup() 之前添加延迟

Posted

技术标签:

【中文标题】在 jQuery 中触发 keyup() 之前添加延迟【英文标题】：Adding a delay before keyup() fires in jQuery 【发布时间】：2011-11-28 09:56:09 【问题描述】：

我已经阅读了一些建议的问题，但我不确定如何实施它们：

(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));

在指定时间后，例如100毫秒

更新的工作代码：

<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>

【问题讨论】：

在一个完全不相关的注释上。我会建议干燥你的代码。你做同样的事情 7 次，在这个过程中，你每次做另一件事 7 次。 【参考方案1】：

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

【讨论】：

感谢这个库，我决定接受 Daniel 的建议，因为它使用了现有的 jQuery 功能。【参考方案2】：

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

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

【讨论】：

【参考方案3】：

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

【讨论】：

以上是关于在 jQuery 中触发 keyup() 之前添加延迟的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 仅在附加了 jQuery 时才会触发 keyup 事件

jQuery中keyup和keydown的应用？ [复制]

在 Angular 5 TypeScript 中触发 keyup 事件

JQuery——键盘事件.keydown().keyup()和.keypress()

在我点击输入或提交之前，jQuery 验证器不会触发

jquery 键盘事件 keypress() keydown() keyup()