Adding a delay before keyup() fires in jQuery

jquery onkeyup timedelay
Seany84 picture Seany84 · Sep 30, 2011 · Viewed 22.6k times · Source

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>

Answer

Richard JP Le Guen picture Richard JP Le Guen · Sep 30, 2011

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

Related questions

Count characters in textarea

I want to count characters in a textarea, so I just made: <textarea id="field" onkeyup="countChar(this)"></textarea> function countChar(val){ var len = val.value.length; if (len >= 500) { val.value = val.value.substring(0, 500); } else { $(…

Read More
JQuery: Keyup, how do I prevent the default behavior of the arrow (up & down) and enter key?

JavaScript (JQuery) $('input').keyup(function(e) { var code = e.keyCode ? e.keyCode : e.which; switch(code) { case 38: break; case 40: break; case 13: break; default: return; } }); HTML <form method="post" action="/"> <input type="text" name="text" /> <button …

Read More
jQuery key code for command key

I have read jQuery Event Keypress: Which key was pressed? and How can i check if key is pressed during click event with jquery? However my question is if you can get the same key event for all browsers? Currently …

Read More