Question

以下是我的代码，我不断更新动态创建的页面的内容，但问题是我的更新功能在我甚至不查看的页面上每3秒运行一次。我无法解决这个问题。

var widgetNames = new Array();
var widgetId = new Array();



$( document ).on( "pagecreate", function() {
    $( "body > [data-role='panel']" ).panel().enhanceWithin();

});

$(document).on('pagecreate', '#page1', function() {

    $("#log").on('click', function(){

        $.ajax({
            url: "script.login",
                type: "GET",
                data: { 'page':'create_user', 'access':'user','username':$("input[name='username']").val(), 'password':$("input[name='password']").val()},
                dataType: "text",
                success: function (html) {
                    console.log(html);


                    widgetNames = new Array();
                    widgetId = new Array();
                    var res = html.match(/insertNewChild(.*);/g);




                    for(var i =0;i<res.length;i++){

                        var temp = res[i].split(',');
                        if(temp.length >= 3){
                          widgetNames[i] = (temp[2].replace('");','')).replace('"','');
                          widgetId[i] = temp[1].replace("'","").replace("'","").replace(/ /g,'');
                        }           
                    }



                    var AllWidgets = ''


                    var testwidget = new Array();


                    var tempWidgetContent = html.match(/w\d+\.isHidden(.*)\(\) == false\)[\s\S]*?catch\(err\)\{ \}/gm);

                    for(var i =0;i<tempWidgetContent.length;i++){
                          var widgetContent = tempWidgetContent[i].substring(tempWidgetContent[i].indexOf('{')+1);

                          testwidget[i] = widgetContent.replace("site +","");


                    }



                  var widgetPart =  new Array();



                    for(var i = 0; i<widgetNames.length; i++){


                       var pageHeaderPart = "<div data-role='page' id='"+widgetId[i]+"' data-pageindex='"+i+"' class='dynPageClass'><div data-role='header' data-position='fixed'><a data-iconpos='notext' href='#panel' data-role='button' data-icon='flat-menu'></a><h1>BASKETBALL FANATICO</h1><a data-iconpos='notext' href='#page2' data-role='button' data-icon='home' title='Home'>Home</a></div> <div data-role='content'>";

                       var pageFooterPart = "</div><div data-role='footer' data-position='fixed'><span class='ui-title'><div id='navigator'></div></span></div></div>";

                        widgetPart[i] = '<DIV style=\" text-align: center; font-size: 100pt;\" id=widgetContainer_'+widgetId[i]+'></DIV><SCRIPT>' + 'function UpdateWidgetDiv'+widgetId[i]+'() {' + testwidget[i] + '$(\"#widgetContainer_'+widgetId[i]+'").html(counterValue);' + '}' + 'setInterval(function(){UpdateWidgetDiv'+widgetId[i]+'()},3000)' + '</SCRIPT>';




                  AllWidgets +='<a href="#'+widgetId[i]+'" class="widgetLink" data-theme="b" data-role="button" >'+widgetNames[i]+'</a>';                         


                                   var makePage = $(pageHeaderPart + widgetPart[i] + pageFooterPart);

                        makePage.appendTo($.mobile.pageContainer);
                    }
                    $('#items').prepend(AllWidgets).trigger('create');

                    var page = $('body').pagecontainer('getActivePage').prop("id");  

                    console.log('The Page Id is: '+page);

                }
        });
    });
});

在此代码中，我希望运行以下函数

'的setInterval（函数（）{UpdateWidgetDiv' +为widgetid [I] + '（）}，3000）'

仅适用于用户正在查看的页面。

Answer 1

这是 DEMO

在创建页面时，以及在widgetId数组中保存页面ID时，我还将当前页面索引保存为每个动态页面上的数据属性（data-pageindex），我正在为所有人分配一个类动态页面（dynPageClass）：

for (var i = 0; i< 3; i++){
    var pageid = 'dynPage' + i;
    widgetId.push(pageid);
    var p = '<div data-role="page" id="' + pageid + '" data-pageindex="' + i + '" class="dynPageClass">';
    p += '<div data-role="header"><h1>Dyn Page' + i + '</h1></div>';
    p += '<div role="main" class="ui-content">I am dynamically created</div>';
    p += '<div data-role="footer"><h1>Footer</h1></div>';
    p += '</div>';
    $('body').append($(p));
}

可以使用处理swipeleft和swiperight的dynPageClass上的一个处理程序来处理滑动代码：

$(document).on("swiperight swipeleft", ".dynPageClass", function(e) {
    var ind = parseInt($(this).data('pageindex'));
    var topageid = "page2";
    var rev = true;
    if (e.type == 'swiperight'){
        if (ind > 0){
            topageid = widgetId[ind - 1] ; 
        }
    } else {
        rev = false;
        if (ind < widgetId.length - 1){
            topageid = widgetId[ind + 1] ; 
        }            
    }
    $.mobile.changePage("#" + topageid, {transition: "slide", reverse: rev});
});

我们首先从data属性获取当前页面的索引并将其解析为整数。然后我们看看这是向右还是向左滑动。如果正确，索引大于0，我们需要返回一个动态页面。否则它是左滑动，如果当前页面不是最后一页，我们需要前进一页。

第2页的swipeleft代码保持不变：

$(document).on("swipeleft", "#page2", function() {
   $.mobile.changePage("#"+widgetId[0], {transition: "slide", reverse: false});
});

动态创建页面

1 个答案: