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

我面临以下问题。我有一个函数，在成功时返回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内容传递给函数loop，并希望它循环receivedData[I]。我想我应该将loopHTML内容转换为字符串，但是如何告诉非结构化的receivedData[I]位置呢？你能告诉我更好的方法吗？请不要建议我使用插件，因为我想制作简单的无限滚动。提前谢谢

我认为您需要将一个函数传递给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函数的其余部分，使其在没有更多电影数据时停止尝试滚动。

不，您只需正确循环数组。多个处理程序绑定到滚动事件可能会出现问题-我认为您实际上是在每次数据进入时添加一个新的处理程序。这很简单显然，将处理程序附加到页面底部是个坏主意——它们会经常触发。谢谢，我已经解决了这个问题。谢谢你的建议，我已经照你说的做了。谢谢是否可以获取JSON部件？我的意思是，当我向下滚动时，我可以只获取服务器发送给我的JSON的特定部分，或者我必须获取所有JSON文件并获取我想要的内容？是的，你正确理解了我，但这对我不起作用。。如果我在别的地方弄错了，我会再检查一遍。