使用JSON加载数据时更新iScroll

时间:2013-04-20 14:10:26

标签: javascript ajax json iscroll

我有一个用JSON生成的列表,它工作得很好。现在我想每20秒刷新一次这个列表,这也很有效。但是我希望能够在生成数据后立即更新我的iScroll,但就像现在一样,它等待20秒然后更新滚动长度。我不知道从哪里开始并希望得到帮助...... 这是我的剧本:

var userid=1,

dataUrl = 'http://mypage.com/playermenu.php?callback=?&userid=' + userid,
dataCallback = function (data) {
    var content = [];
    //var profile = [];
    $.each(data, function (i, val) {
        content.push(val.list); // GETTING ALL THE GAMES //
        $('#userbar').html(val.profile); // FETCHING USERS DATA FOR PROFILEBAR //
    });
    $('#games').html(content.join('')).listview('refresh');
},
fetchData = function () {
    myScroll = new iScroll('wrapper');
    if (myScroll.isReady()){
        $.getJSON(dataUrl, dataCallback);
    }
};
fetchData();
setInterval(fetchData, 20000);

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200);  }, false);

提前致谢: - )

1 个答案:

答案 0 :(得分:0)

我认为#userbar#games位于#wrapper元素内。因为每次更新这些元素。我希望这会有所帮助:

$(function(){
myScroll = null;
dataCallback = function(data) {
    if (myScroll) { // before reuse it, completely destroy the myScroll and free some memory
        myScroll.destroy();
        myScroll = null;
    }
    myScroll = new iScroll('wrapper');
    var content = [];
    $.each(data, function (i, val) {
        content.push(val.list); // GETTING ALL THE GAMES //
        $('#userbar').html(val.profile); // FETCHING USERS DATA FOR PROFILEBAR //
    });
    $('#games').html(content.join('')).listview('refresh');
    setTimeout(function(){
        myScroll.refresh(); // refresh to show  correct dimensions
    }, 0);
}
fetchData = function () {
    var userid = 1;
    var dataUrl = 'http://mypage.com/playermenu.php?callback=?&userid=' + userid;
    $.getJSON(dataUrl, dataCallback);
}
fetchData();
setInterval(fetchData, 20000);
});

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200);  }, false);