Добавление задержки перед срабатыванием keyup() в jQuery

Я прочитал некоторые из предложенных вопросов, но я не уверен, как именно их реализовать:

(jquery/js ) - получить текст из поля по нажатию, но с задержкой для дальнейшего набора
Как отложить обработчик .keyup() до тех пор, пока пользователь не перестанет печатать?
Как вызвать событие onkeyup, которое откладывается до тех пор, пока пользователь не прекратит печатать?

У меня есть 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>

jquery timedelay onkeyup

Seany84 30.09.2011 источник

comment

На совершенно не относящейся к делу ноте. Я бы порекомендовал высушить ваш код. Вы делаете одно и то же 7 раз, и в этом процессе вы делаете еще 7 раз каждое. - bstakes 30.09.2011

Ответы (3)

arrow_upward
3
arrow_downward

Поместите свой код в тайм-аут. Затем при последующих событиях 1keyup очистите тайм-аут и сбросьте его.

Это то, что делает этот Как отложить обработчик .keyup() до тех пор, пока пользователь не перестанет печатать?

Daniel A. White 30.09.2011

arrow_upward
4
arrow_downward

Вы можете использовать библиотеку underscore.js функция устранения дребезга.

Richard JP Le Guen 30.09.2011

comment

Спасибо за эту библиотеку, я решил воспользоваться предложением Дэниела, так как в нем используются существующие функции jQuery. - Seany84; 30.09.2011

arrow_upward
0
arrow_downward

Используйте дроссель/дебаунс jQuery Бена Алмана: http://benalman.com/projects/jquery-throttle-debounce-plugin/.

ialphan 02.10.2012

Добавление задержки перед срабатыванием keyup() в jQuery

Ответы (3)

Вопросы по теме