在 Jquery Mobile 中发生循环时的加载程序答案

【问题标题】：Loader when occuring loops in Jquery Mobile在 Jquery Mobile 中发生循环时的加载程序
【发布时间】：2014-07-03 08:06:40
【问题描述】：

我面临的问题是从循环加载数据时需要显示加载器。我在循环中使用大量数据，所以如果在发生循环情况时显示加载器会很棒。厌倦了 pagebeforeshow 和 pageshow 方法。但它对我不起作用。这是我的代码。请帮我这样做。

var lazy_load_group_page_cnt = 1;
var lazy_load_group_limit = 50;
var lazy_load_group_flag = false;

$( "#pg_sms-group" ).on( "pagebeforeshow", function( event ) {

    $('#add_group-notification').empty(); 
    $('#ul_group_list').empty();
    loadSMSGroup(lazy_load_group_limit,lazy_load_group_page_cnt);
 });
 $( "#pg_sms-group" ).on( "pageshow", function( event ) {

 $.mobile.loading( 'show', {
        text: "loading...",
        textonly: false,
        textVisible: true,
        theme: 'a',
        html: ""
    });
});
 function loadSMSGroup(limit, page){
    var xmlRequest = getXmlSMSgroupRequest();
    var wsdlURL = getWSDL('callServer');

    lazy_load_group_flag = true;
    $.ajax({
        url: wsdlURL,
        type: "POST",
        dataType: "text",
        data: xmlRequest,
        contentType: "text/xml; charset=\"utf-8\"",

        success: function(xmlResponse) {
            var obj_response = parseResponse(xmlResponse);
            if (obj_response.flag){ 
                loadGroupList(obj_response.data);
            }
            }
        },
        error: function(xmlResponse) {
            //error
        }

    });
    lazy_load_group_flag = false;
    return false;

 }

 function loadGroupList(jsnObj){

        var obj_group_list = jsnObj.groups;

        sessionStorage.setItem("ses_group", JSON.stringify(obj_group_list));

        $.each(obj_group_list, function(ctr, obj) {

            $('#ul_group_list').append('<li>' +
                '<a href="#" class="add-container">' +
                    '<label class="add-container" data-corners="false">' +
                        '<input name="chk_group" id="chk_group" type="checkbox" value="'+obj.groupname+'{group-'+obj.groupid+'}'+'"  />' +
                        '<label class="lbl_add-container">' +
                            '<h3>'+obj.groupname+'</h3>' +'</div>' +
                        '</label>' +
                    '</label>' +
                '</a>' +
                '<a href="#pg_add-group"  onclick="sessionStorage.group_id='+obj.groupid+'"</a>'+
            '</li>');
        });
        $("input[name=chk_group]").checkboxradio();
        $('#ul_group_list').listview('refresh');
 }
</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Header Text</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>The page has been created and enhancement is done!</p>
<div id="king">
</div>
<ul data-role="listview" id="ul_group_list" data-inset="true">
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

【问题讨论】：

标签： jquery-mobile loading jquery-mobile-listview

【解决方案1】：

由于 JavaScript 的单线程性，您无法以这种方式执行单片 CPU 密集型任务。您可以使用：

Web Workers（参见示例here 和here）
setTimeout 诡计 (JSFiddle)

在这两种情况下，当“完成”事件触发时，您必须调用$.mobile.loading("hide");。

关于您的代码示例，请参阅我的修改版本（未经测试）：

<script>
var lazy_load_group_page_cnt = 1;
var lazy_load_group_limit = 50;
var lazy_load_group_flag = false;
var obj_group_list = [];
var counter = 0;

$( "#pg_sms-group" ).on( "pagebeforeshow", function( event ) {

    $('#add_group-notification').empty(); 
    $('#ul_group_list').empty();
    loadSMSGroup(lazy_load_group_limit,lazy_load_group_page_cnt);
 });

 function loadSMSGroup(limit, page){
    var xmlRequest = getXmlSMSgroupRequest();
    var wsdlURL = getWSDL('callServer');

    lazy_load_group_flag = true;
    $.ajax({
        url: wsdlURL,
        type: "POST",
        dataType: "text",
        data: xmlRequest,
        contentType: "text/xml; charset=\"utf-8\"",

        success: function(xmlResponse) {
            var obj_response = parseResponse(xmlResponse);
            if (obj_response.flag){ 
                counter = 0;
                obj_group_list = obj_response.data.groups;
                sessionStorage.setItem("ses_group", JSON.stringify(obj_group_list));
                pump();
            }
        }
        },
        error: function(xmlResponse) {
            //error
        }

    });
    lazy_load_group_flag = false;
    return false;

 }

function worker(loops)
{
    for (var l = 0; l < loops; l++)
    {
        if (counter >= obj_group_list.length)
            break;

        $('#ul_group_list').append('<li>' +
            '<a href="#" class="add-container">' +
                '<label class="add-container" data-corners="false">' +
                    '<input name="chk_group" id="chk_group" type="checkbox" value="'+obj_group_list[counter].groupname+'{group-'+obj_group_list[counter].groupid+'}'+'"  />' +
                    '<label class="lbl_add-container">' +
                        '<h3>'+obj_group_list[counter].groupname+'</h3>' +'</div>' +
                    '</label>' +
                '</label>' +
            '</a>' +
            '<a href="#pg_add-group"  onclick="sessionStorage.group_id='+obj_group_list[counter].groupid+'"</a>'+
        '</li>');

        counter++;
    }
}

function pump()
{
    worker(100);
    if (counter < obj_group_list.length)
        setTimeout(pump, 50);
    else
    {
        $("input[name=chk_group]").checkboxradio();
        $('#ul_group_list').listview('refresh');
        $.mobile.loading("hide");
    }
}

</script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Header Text</h1>
  </div>
  <div data-role="main" class="ui-content">
    <p>The page has been created and enhancement is done!</p>
<div id="king">
</div>
<ul data-role="listview" id="ul_group_list" data-inset="true">
  </div>
  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 
</body>
</html>

【讨论】：

嗨，上面提到的代码只是一个例子。我已经检查了 JSFiddle。我正在 pagebeforeshow 事件中进行soap ajax调用。在从服务器获取详细信息后附加 ul_group_list。太难了私下处理变量。你能指导我这样做吗？
删除后');'在工人循环中，它工作得很好。我们可以在工人循环本身中刷新列表框。