Проблема с mobile.loading и временем - JQuery Mobile - PullRequest
Новая
       3

Проблема с mobile.loading и временем - JQuery Mobile

0 голосов
/ 15 февраля 2019

Я пытаюсь показать анимацию загрузки во время вызова функции, который занимает некоторое время.Вызов функции ищет большой массив, который уже загружен.После поиска соответствующие элементы вставляются в таблицу.Таблица очищается перед началом поиска.

Проблема в том, что анимация отображается только в краткий момент, когда страница обновляется.

Вот мой код: 

var interval = setInterval(function ()
{
   $.mobile.loading('show');
   clearInterval(interval);
}, 1);

DoSearch(term, function ()
{
   var interval = setInterval(function ()
   {
      $.mobile.loading('hide');
      clearInterval(interval);
   }, 1000);
});

//The search function looks like this (detail omitted for brevity):
function DoSearch(term)
{
    $("table#tableICD tbody").html('');

    // also tried:
    /*$("table#tableICD tbody")
    .html('')
    .table()
    .closest("table#tableICD")
    .table("refresh")
    .trigger("create");*/

    var tr = '';

    $.each(codes, function (key, value)
    {
       // determine which items match and add them as table rows to 'tr'
    });


    $("table#tableICD tbody")
       .append(tr)
       .closest("table#tableICD")
       .table("refresh")
       .trigger("create");

    callback();
}

Поиск работает правильно и добавляет строки в таблицу.У меня есть два неожиданных поведения:

  1. Таблица не очищается, пока поиск не будет завершен.Я попытался добавить .table ("refresh"). Trigger ("create") в строку, где я установил tbody html в пустую строку.Это не помогает.(см. закомментированную строку в коде)

  2. Как я уже говорил, анимация кратковременно отображается во время обновления экрана.(Заметьте, что я установил интервал в 1000 во второй функции setInterval, чтобы я мог его увидеть.)

Советы, которые я прочитал, состоят в том, чтобы использовать setInterval вместо прямого вызова $.mobile.loading, что я сделал и поместил поиск в функцию и использовал обратный вызов, что я также сделал.

Есть идеи?

1 Ответ

0 голосов
/ 18 февраля 2019

Позвольте мне дать вам несколько советов;они, вероятно, не решат все ваши проблемы, но могут помочь вам найти решение.

  1. jQuery Mobile глючит, и для некоторых функций мы никогда не узнаем, предназначались ли они для такой работы или онипросто простые ошибки
  2. Вы можете вызывать $ .mobile.loading ('show') самостоятельно, только в случае просмотра страниц jQuery Mobile.В любом другом случае вам нужно сделать это с интервалом или тайм-аутом.

  3. Лучше делать это по таймауту, в основном потому, что вы используете меньше кода.Вот пример, который я сделал несколько лет назад: http://jsfiddle.net/Gajotres/Zr7Gf/

    $(document).on('pagebeforecreate', '[data-role="page"]', function(){     
    setTimeout(function(){
        $.mobile.loading('show');
    },1);    
});

$(document).on('pageshow', '[data-role="page"]', function(){
    // You do not need timeout for pageshow. I'm using it so you can see loader is actualy working
    setTimeout(function(){
        $.mobile.loading('hide');
    },300);      
});

  4. Это отстой, чтобы улучшить любую разметку jQuery в реальном времени после загрузки страницы.Поэтому я советую сначала создать новое содержимое таблицы, затем очистить его, а затем обновить разметку, используя .table ("refresh") .

  5. Только обновление таблицыодин раз, никогда не делайте этого несколько раз подряд.Это очень трудоемкий метод, и он будет длиться очень долго, если вы будете запускать его для каждой строки

  6. Если вы ищете нажатие клавиши в поле ввода, а затем показывает его в таблице;это наименее эффективный метод в jQuery Mobile.JQM настолько медленный, гораздо лучше использовать компонент списка просмотра, который требует меньше ресурсов.
...