2012-07-19 40 views
1

我有一個JS函數被調用的document.ready。目的是當它滾動到底部窗口時,它將從JSON API中加載更多。的jQuery如何通過有值變量增量在遞歸函數

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

回答

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

有趣。在這種情況下,怎麼會知道何時停止額外的回調,因爲我有一個檢查,看看數據的長度= 20或更多,然後繼續,如果少的話停? – Yasir 2012-07-19 17:49:38