如何将html作为字符串传递给另一个函数中的循环？

Question

我面临着以下问题。我有一个函数，它在成功时返回JSON数据。我正在尝试制作无限滚动，所以在这个函数中，我正在准备html，以便在另一个函数中循环，这将完成这项工作。服务器将JSON返回给我：

{ "id" : 6,
  "title" : "Store Title #1",
  "movies" : [{ "id" : 1164,
                "title" : "Movie 1",
                "publishDate" : "1993-01-01T00:00:00",
                "description" : "{long description...}" },
              { "id" : 8452,
                "title" : "Movie 2",
                "publishDate" : "1985-01-01T00:00:00",
                "description" : "{long description...}" },
              { "id" : 6451,
                "title" : "Movie 3",
                "publishDate" : "1945-01-01T00:00:00",
                "description" : "{long description...}" }]
}

成功时的函数：

     function onsuccess(data) {
        var libraryInfoHTML = '<h2 data-id="' + data.id + '">' + data.title + '</h2><ul></ul>';
        var receivedData = data.movies;
        var loopHTML = 
            '<li>' +
                '<h3 class="clear"><span class="icons video-library video-icon"></span>' +
                    '<a href="#" title="' + receivedData[i].title + '" data-id="' + receivedData[i].id + '">' +
                        receivedData[i].title +
                    '</a>' +
                '</h3>' +
                '<h4 class="clear"><span class="icons publish-date"></span>' +
                    receivedData[i].publishDate +
                '</h4>' +
                '<p>' +
                    receivedData[i].description +
                '</p>' +
            '</li>';
    infinityScroll(receivedData, loopHTML);
}

无限滚动功能：

function infinityScroll(received_data, loop_HTML) {
    var i=0;
    var length = received_data.length;
    var items_to_load = 10;
    function loop() {
        var html_maker = '';
        for(; i<items_to_load; i++) {
            html_maker +=
                loop_HTML;
        }
        items_to_load += i;
        $('#container ul').append(html_maker);
    }

    function scroller() {
        if ($(window).scrollTop() >= ($(document).height() - $(window).height())*0.95){
            loop();
        }
    }
    $(window).scroll(scroller);
}

所以第一个函数会给出错误，因为"i“是未定义的。我希望将"loopHTML“内容传递给"function loop()”，并希望它循环"receivedDatai“。我想我应该将"loopHTML“内容转换为字符串，但是如何区分非字符串的"receivedDatai”位置呢？你能告诉我做这个的更好的方法吗？请不要建议我插件，因为我想让简单的无限滚动。提前感谢！

Answer 1

我认为您想要的是将一个函数传递给infinityScroll，该函数包含接收到的数据，并且可以将i作为参数：

 function onsuccess(data) {
     var libraryInfoHTML = '<h2 data-id="' + data.id + '">' + data.title + '</h2><ul></ul>';

     var htmlFunction = (function () {
         var receivedData = data.movies;
         return function (i) {
             if (i < receivedData.length) {
                 return '<li>' +
                     '<h3 class="clear"><span class="icons video-library video-icon"></span>' +
                     '<a href="#" title="' + receivedData[i].title + '" data-id="' + receivedData[i].id + '">' + receivedData[i].title +
                     '</a>' +
                     '</h3>' +
                     '<h4 class="clear"><span class="icons publish-date"></span>' + receivedData[i].publishDate +
                     '</h4>' +
                     '<p>' + receivedData[i].description +
                     '</p>' +
                     '</li>';
             }
         };
     })();
     infinityScroll(htmlFunction);
 }

然后调整infinityScroll...

function infinityScroll(loopHtmlFunction) {
    var items_to_load = 10;
    var i = 0;
    var html;
    function loop() {
        var html_maker = '';
        for(; i<items_to_load && html = loopHtmlFunction(i); i++) {
            html_maker += html;
        }
        items_to_load += i;
        $('#container ul').append(html_maker);
    }    
    // etc.
}

请注意，这也会检查receivedData中是否有更多的电影数据，如果没有，就不会再添加到html中。但是，您可能想要调整infinityScroll函数的其余部分，以便一旦没有更多的电影数据，它就停止滚动。