mobile.loading和timing的问题 - JQuery Mobile

Question

我试图在函数调用期间显示加载动画需要一些时间。函数调用正在搜索已加载的大型数组。搜索后，匹配项将插入表中。在开始搜索之前清除该表。

问题是动画仅在页面更新的短暂时刻显示。

这是我的代码：

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. 正如我所提到的，当屏幕刷新时，动画会短暂显示。 （注意我在第二个setInterval函数中将间隔设置为1000，所以我甚至可以看到它。）

到目前为止我读过的建议是使用setInterval而不是直接调用$ .mobile.loading，我已经完成了这项工作，并将搜索放在一个函数中并使用回调，我也做过。

有任何想法吗？

Answer 1

我来几点建议;它们可能无法解决您的所有问题，但它们可能会帮助您找到解决方案。

1. jQuery Mobile是有缺陷的，对于某些功能，我们永远不会知道他们是打算像那样工作还是只是普通的bug
2. 您只能在pageshow jQuery Mobile事件中调用$ .mobile.loading（'show'）。在任何其他情况下，您需要在间隔或超时中执行此操作。
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很慢，使用listview组件要好得多，这是资源最少的。