1

我有一个在 document.ready 中调用的 JS 函数。意图是当它滚动到底部窗口时，它将从 JSON API 加载更多内容。

API有参数offset和limit。偏移量控制您看到的结果子集。例如。20-40 将是 offset=20 并且限制控制您一次可以查看多少。

我想我会用一个递归函数来解决这个问题，每次用户进入窗口底部时都会调用它自己，使用 window.scroll。一旦它们到达底部，它将每次将偏移量增加 20，然后再次运行该函数。

问题：我似乎无法让它将变量增加 20 来完成这项工作。想法？

function getData(offset) {
var jsonCallback = "&jsoncallback=?";
//var offset = 20;
//var offset += 20;
var limit = 20;

var characterURL = "http://api.example.com/character&byId=" + characterID + "&offset=" + offset + "&limit=" + limit;    

$.getJSON(characterURL + jsonCallback, function(data) {
    for (i=0; i < (data.data.results).length; i++) {

        var $characterUl = $("<ul>");
        $characterUl.appendTo("#characterComics");
        $("<li>").text(data.data.results[i].title).appendTo($characterUl);  
        $("<li>").text(data.data.results[i].id).appendTo($characterUl);  
        $("<li>").text(data.data.results[i].release_date).appendTo($characterUl);  
        if (data.data.results[i].release_date > 0) {
            $characterLi.text(data.data.results[i].issue_number).appendTo($characterUl);      
        }  
    }

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            while ((data.data.results).length === offset || (data.data.results).length > offset) {
                offset = offset+20;
                $("<div>").text(offset).appendTo("body");
                getComics(offset);
            }
        }
    });
   });
}

$(document).ready(function() {    
var $characterComics = $("<div>", {id : "characterComics"});
$characterComics.appendTo("body");
getData(0);
});
4

1 回答 1

1

更新 阅读更多作为伪代码

function getData(offset) {
    var jsonCallback = "&jsoncallback=?",
    characterURL = "http://api.example.com/character&byId=" + characterID + "&offset=" + offset + "&limit=" + limit;    

    $.getJSON(characterURL + jsonCallback, function(data) {
        for (i=0; i < (data.data.results).length; i++) {
            var $listItem = $("<li>");
            listItem.append("<span>"+data.data.results[i].title+"</span>");
            listItem.append("<span>"+data.data.results[i].id+"</span>");
            listItem.append("<span>"+data.data.results[i].release_date+"</span>"); 
            if (data.data.results[i].release_date > 0) {
                listItem.append("<span>"+data.data.results[i].issue_number+"</span>");   
            }
            listItem.appendTo($characterUl);
            itemsLoaded++;
        }
   });
}

$(document).ready(function() {
    var $characterComics = $("<div>", {id : "characterComics"}),
        $characterUl = $("<ul>"),
        offset = 0,
        itemsLoaded = 0;
        limit = 20;
    $characterComics.appendTo("body");
    $characterUl.appendTo($characterComics);

    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() > $(document).height() - 10) {
            if ("check here if you reached your offsets") {
                offset = offset+20;
                getData(offset);
            }
        }
    });
   // get your first set of data
   getData(0);
});
于 2012-07-19T17:40:58.203 回答