jQuery How to Have Variable Increment by Value in a Recursive Function

Question

I have a JS Function which is called in document.ready. The intent is as it scrolls to the bottom window, it'll load more from the JSON API.

The API has the parameter offset and limit. Offset controls which subset of results you are seeing. For ex. 20-40 would be offset=20 and limit controls how many you can view at once.

I thought I would approach this with a recursive function which calls itself each time the user goes to the bottom of the window, with window.scroll. Once they go to the bottom, it'll increment the offset by 20 each time, then run the function again.

Problem: I can't seem to get it to increment the variable by 20 to make this work. Thoughts?

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);
});

Peter Pajchl · Accepted Answer · 2012-07-20 08:47:17Z

1

UPDATED Read this more as a pseudo-code

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);
});

edited Jul 20, 2012 at 8:47

answered Jul 19, 2012 at 17:40

Peter Pajchl

2,70921 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Yasir Over a year ago

interesting. in this case, how would it know when to stop additional callbacks, since i have a check to see if the length of data is = to 20 or more, then to continue, and if its less, then to stop?

Collectives™ on Stack Overflow

jQuery How to Have Variable Increment by Value in a Recursive Function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related