1

document.ready で呼び出される JS 関数があります。その意図は、一番下のウィンドウまでスクロールすると、JSON API からさらに読み込まれることです。

API には、パラメータ オフセットと制限があります。オフセットは、表示する結果のサブセットを制御します。例のために。20 ～ 40 はオフセット = 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

UPDATED 疑似コードとしてこれをもっと読む

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 に答える