Jquery Mobile中发生循环时的加载器

Question

我面临的问题是，从循环加载数据时我需要显示加载器。我在循环中使用了大量数据，因此在发生循环情况时如果显示加载器会很棒。和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>

Answer 1

由于JavaScript具有单线程功能，因此您无法以这种方式执行单片CPU密集型任务。 您可以使用：

• 网络工作者（请参见此处和此处的示例）
• setTimeout技巧（ JSFiddle ）

在这两种情况下，当“ completed”事件触发时，您都必须调用$.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>