Question

我能够从JSON文件列出电影，但我想增加有限变量的总数，所以当我向下滚动时，我再添加10部电影

这是我的代码

(function () {
    $.getJSON("m.json", function (movie) {
        var limitMovies = [];
        var totalMovies = 10;

        for (var i = 0; i < totalMovies; i++) {
            limitMovies.push(movie[i]);
        }

        var movies = document.getElementById('movies');

        for ( i = 0; i < limitMovies.length; i++ ) {
            var addMovies = '<a id="' + i + '" class="Movie" target="_blank" href="'+ limitMovies[i].url + '/"><img src="' 
                            + limitMovies[i].Poster + '"/></a>';
            movies.innerHTML += addMovies;
        }
        i = 20;
        $(window).scroll(function(){
    });
});
}());

Answer 1

将var limitMovies;添加到代码的第一行，以使其可全局访问。删除其他limitMovies声明前面的所有var。然后做：

 $(window).scroll(function(){ 
    limitMovies+=10;
});

但是，这不会回答你真正的问题。只是增加柜台不会工作。您需要重新运行for循环以从该数组进行解析。此外scroll每秒会发射一千次，你需要另一种方法来检测它。可以看看： https://www.sitepoint.com/jquery-infinite-scrolling-demos/ 您需要重新构建整个代码，这不适合SO ...

的答案

Answer 2

我已经重构了一些代码，我所做的更改是从文件中加载所有电影，但是在滚动事件中将它们附加到容器中。您可以查看工作版here。

;
(function () {
    let loadedMovies = [];
  let lastMoviePosition = 0;
  let container = $('#movies');

  $.getJSON("m.json", function (movies) {
        if(movies && movies.length > 0){
           loadedMovies = movies;
           addMovies(10);
        }
  });

    let addMovies = (n) => {
        for(let i=0; i<n && lastMoviePosition < loadedMovies.length; i++){
        var movie = '<a id="' + i + '" class="Movie" target="_blank" href="'+ limitMovies[lastMoviePosition].url + '/"><img src="' 
                        + limitMovies[lastMoviePosition].Poster + '"/></a>';

        container.append(movie);
        lastMoviePosition++;
    }
  };

$(window).scroll(function(){
    addMovies(10);
});

})();

滚动时增加变量中有限数字的数量

2 个答案: