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();
}

搜索工作正常，并将行添加到表中。我有两种意外的行为：

直到搜索完成，表格才会清除。我尝试将.table（“ refresh”）。trigger（“ create”）添加到将tbody html设置为空字符串的行。这无济于事。（请参见代码中的注释行）
如上所述，动画在屏幕刷新时会短暂显示。（请注意，我在第二个setInterval函数中将间隔设置为1000，这样我什至可以看到它。）

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

有什么想法吗？

Answer 1

让我给你一些建议；他们可能不会解决您的所有问题，但可以帮助您找到解决方案。

jQuery Mobile有很多错误，对于某些功能，我们永远不会知道它们是打算那样工作还是仅仅是简单的错误
您只能在pageshow jQuery Mobile事件中自行调用$ .mobile.loading（'show'）。在任何其他情况下，您都需要在间隔或超时时间内完成。

最好在超时时执行此操作，主要是因为您使用的代码较少。这是我几年前提出的一个示例：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);      
});

在页面加载后，它会糟透了，以实时增强任何jQuery标记。因此，我的建议是首先生成新表内容，然后清理它，然后使用 .table（“ refresh”）更新标记。
仅刷新一次表，而不在行中多次刷新。这是一种资源非常丰富的繁重方法，如果您为每一行运行它，它将持续很长时间
如果您正在输入框中搜索按键，然后将其显示在表格中；这是jQuery Mobile中效率最低的方法。 jQM这么慢，最好使用资源最少的listview组件。

mobile.loading和计时问题-JQuery Mobile

1 个答案: