Adding a delay before keyup() fires in jQuery

Question

I have read through some of the suggested questions but I am not sure exactly how to implement them:

I have 8 textboxes, 7 are used for numeric input and the 8th is a total. i.e. 7.5 + 7.5 + 7.5 + 7.5 + 7.5 + 0.0 + 0.0 = 37.5

I have the jQuery working so that it monitors each textboxes keyup() and adds all of the values and calculates the total.

I decided that I want to format the users input in the 7 textboxes so that it comes out like #.# if they enter "1" or ".1" i.e. "1.0" or "0.1".

The problem is that I need to add a delay before the input is formatted and I am unsure as to how I do it with javascript and/or 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>

Ideally, I would like to fire this line:

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

After a specified time e.g. 100ms

Updated working code:

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

On a completely unrelated note. I would recommend DRYing out your code. You do the exact same thing 7 times, and in that process, you do another thing 7 times each. — bstakes, Sep 30 '11 at 11:53

score 4 · Answer 1 · answered Sep 30 '11 at 11:41

4

You could use the underscore.js library's debounce function.

answered Sep 30 '11 at 11:41

Richard JP Le Guen

28,364
7
89
119

Thank you for that library, I have decided to go with Daniel's suggestion as it is using existing jQuery functionality. – Seany84 Sep 30 '11 at 11:51

score 3 · Accepted Answer · edited May 23 '17 at 10:31

3

Put your code in a timeout. Then on subsequent 1keyup events, clear the timeout and reset it.

That is what this one is doing How to delay the .keyup() handler until the user stops typing?

edited May 23 '17 at 10:31

Community

1
1

answered Sep 30 '11 at 11:38

Daniel A. White

187,200
47
362
445

score 0 · Answer 3 · answered Oct 02 '12 at 02:10

0

Use Ben Alman's jQuery throttle / debounce: http://benalman.com/projects/jquery-throttle-debounce-plugin/.

answered Oct 02 '12 at 02:10

ialphan

1,241
1
17
30

Adding a delay before keyup() fires in jQuery

3 Answers3