jQuery UI Datepicker медленно во время набора текста

Я слышал все эти замечательные отзывы о том, насколько великолепен и элегантен jQuery, но я 0 из 2, пытаясь реализовать элементы управления jQuery в реальных проектах из-за низкой производительности. На этот раз я столкнулся с проблемой, аналогичной Richard. Пользовательский интерфейс jQuery DatePicker не прошел приемочное тестирование пользователя в приложении ASP.NET, над которым я работаю, потому что при вводе текста в текстовое поле происходит некоторое отставание, особенно при вводе последних двух чисел. (например, "1/1/2010").

Кто-нибудь знает вариант/подход, который не позволит пользовательскому интерфейсу jQuery мешать вводу текста пользователем в текстовом поле, к которому он привязан?


jquery performance jquery-ui jquery-ui-datepicker
person Sephrial    schedule 14.07.2010    source источник
comment
Только что попробовал это на демонстрационной странице jquery ui. Никаких проблем. Можете ли вы воссоздать эту проблему? Есть ли у вас какое-либо видео, демонстрирующее проблему, какие-либо факты/цифры, а также какие браузеры, каковы были характеристики компьютера....и т.д. и т.д., какие другие js были запущены на странице, сколько других элементов управления... Мы действительно нужно больше информации.   -  person redsquare    schedule 15.07.2010
comment
Как сказал Redsquare, пробовали ли вы демонстрацию пользовательского интерфейса jQuery на веб-сайте jQuery? Если у вас там проблем нет, то может быть что-то очень специфическое с вашим сайтом.   -  person JasCav    schedule 22.12.2010
comment
Вы когда-нибудь находили ответ? У меня точно такая же проблема, и у меня такая же проблема на демонстрационном сайте jQueryUI.   -  person Joe Enos    schedule 29.12.2010
comment
Я тоже это сейчас вижу. Так было не всегда, интересно, что изменилось...   -  person DGM    schedule 16.06.2011

Ответы (2)


arrow_upward
3
arrow_downward

У меня была такая же проблема в IE 6. Я использовал инструмент производительности (DynaTrace Ajax Edition), чтобы увидеть, где было отставание, и я нашел его в функции даты обновления, выполняемой при событии нажатия клавиши. Итак, моя работа заключалась в том, чтобы деактивировать событие keyup.

$( "#idOfTheInput" ).unbind("keyup");

EDIT: у этого есть недостаток. При вводе даты вручную средство выбора даты не будет обновляться.

Итак, другое (лучшее?) решение — показывать средство выбора даты только тогда, когда пользователь нажимает маленькую кнопку с опцией showOn: 'button' (подробнее здесь: http://jqueryui.com/demos/datepicker/#).icon-trigger )

Затем измените код средства выбора даты JQuery, чтобы обновлять дату только при отображении средства выбора даты. Для этого найдите функцию _doKeyUp и добавьте условие, говорящее: «Если отображается средство выбора даты, выполните обновление, в противном случае не обновляйте».

_doKeyUp: function(event) {
    var inst = $.datepicker._getInst(event.target);
    if ($.datepicker._datepickerShowing) {
        if (inst.input.val() != inst.lastVal) {
            try {
                var date = $.datepicker.parseDate($.datepicker._get(inst, 'dateFormat'),
                    (inst.input ? inst.input.val() : null),
                    $.datepicker._getFormatConfig(inst));
                if (date) { // only if valid
                    $.datepicker._setDateFromField(inst);
                    $.datepicker._updateAlternate(inst);
                    $.datepicker._updateDatepicker(inst);
                }
            }
            catch (event) {
                $.datepicker.log(event);
            }
        }
    }
    return true;
},

Конечно, немного противно менять код плагина...

person Jason    schedule 23.03.2011
comment
Круто, не могли бы вы поделиться инструментом, который вы использовали? Я не могу дождаться, чтобы проверить это на следующей неделе. - person Sephrial; 24.03.2011
comment
Я использовал DynaTrace Ajax. По сути, это программное обеспечение отслеживает все между вами и сервером: сеть, кеш, javascript и Ajax. Я не люблю рекламировать, но это потрясающая программа. Очень полезно. - person Jason; 24.03.2011
comment
Извините, я так долго не мог воспроизвести проблему в IE 9. Итак, я вернулся и, конечно же, IE 7 все еще отстает. Воспользовался вашим исправлением и проблема исчезла. Спасибо! - person Sephrial; 12.07.2011

arrow_upward
3
arrow_downward

Чтобы расширить то, что сказал Джейсон, вы можете переопределить метод вне базового файла пользовательского интерфейса, выполнив это

jQuery(function(){
  jQuery.datepicker._doKeyUp = function(event) {
    var inst = jQuery.datepicker._getInst(event.target);
    if(jQuery.datepicker._datepickerShowing) {
        if(inst.input.val() != inst.lastVal) {
            try {
                var date = jQuery.datepicker.parseDate(jQuery.datepicker._get(inst, 'dateFormat'),
                                                       (inst.input ? inst.input.val() : null),
                                                       jQuery.datepicker._getFormatConfig(inst));
                if(date) { // only if valid
                    jQuery.datepicker._setDateFromField(inst);
                    jQuery.datepicker._updateAlternate(inst);
                    jQuery.datepicker._updateDatepicker(inst);
                }
            }
            catch (event) {
                jQuery.datepicker.log(event);
            }
        }
     }
      return true;
    }
 });

.......

person Christian    schedule 12.04.2011
comment
Спасибо, Кристиан. Более удобный (и менее грязный!) способ изменить функцию. +1 - person Jason; 13.07.2011