Question

我正忙着制作一个延迟加载器类型函数，当用户到达某个div的底部时，它会加载一组新数据。

每次添加新内容时，计数器会激发太多次，由于某种原因，如果添加了两个新容器，则会触发计数器两次，如果添加了4个容器，则计数器将触发4次，依此类推。 ..

我似乎无法找到数据丢失的位置。也许其他人可以提供帮助！

如果需要，我还附加了JSON数据文件的链接。如果您还需要更多信息，请与我们联系！

代码 -

//AJAX FUNCTIONS

var imgTitle;
var imgLink;
var url = 'http://www.capetownetc.com/api/get_category_posts/?slug=news&count=10&page=';
var counter = 1;

function postCards(pageNumber, cardLimit, container) {
    $.ajax({
        type: 'GET'
        , url: url + pageNumber
        , data: {
            get_param: 'value'
        }
        , dataType: 'jsonp'
        , success: function postPop(data) {
            $('.swiper-slide').append('<div class="card-container' + container + '"></div>');
            $.each(data.posts, function(i){
                imgTitle = data.posts[i].title;
                imgLink = data.posts[i].thumbnail_images.medium.url;
                
                $('.card-container' + container).append('<div class="card card1"><img src="' + imgLink + '" class="card-img"><span><h2 class="card-heading">' + imgTitle + '</h2></span></div>');
            });

        }
        
        });
        
        $(".swiper-slide").scroll(function(){
            if($(this)[0].scrollHeight - $(this).scrollTop() === $(this).outerHeight()) {
                counter = counter + 1;
                postCards(counter, 10, counter);
                console.log(counter);
            };
        });
}

postCards(counter, 10, counter);
console.log(counter);

.swiper-slide {
	overflow: scroll;
    -webkit-overflow: scroll;
    height: 535px;
}

/*SWIPER STYLES*/

.page-content{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    height: 88%;
    position: relative;
    z-index: 1;
}

.swiper-container-h {
  height: 100%;
}
.swiper-slide {
  background:#fff;
}
.swiper-slide span {
  text-align:center;
  display:block;
  margin:20px;
  font-size:21px;
}

.swiper-pagination {
	top: 0;
    height: 55px;
}

.swiper-pagination-bullet{
    opacity: 1;
    background: #c4c4c4;
}

.swiper-pagination-bullet-active{
    background: red;
}

.swiper-container-vertical>.swiper-pagination-bullets{
    right: 5px;
    top: 2%;
}

.swiper-slide {
	overflow: scroll;
    -webkit-overflow: scroll;
    height: 535px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="swiper-wrapper">
                            
                                <div class="swiper-slide main-slide">
                                    
                                </div>
                                
</div>

JSON Data File

Answer 1

每次执行时，postCards函数都会添加一个新的scroll处理程序将$(".swiper-slide").scroll(...)部分移出postCards()功能，使其仅执行一次。

function postCards(pageNumber, cardLimit, container) {
  $.ajax({
    //...
  });
}

$(".swiper-slide").scroll(function() {
  var slide = $(this);

  if (slide[0].scrollHeight - slide.scrollTop() === slide.outerHeight()) {
    counter = counter + 1;
    postCards(counter, 10, counter);
    console.log(counter);
  };
});

当动态创建新div时，Scroll函数会触发多次 - AJAX JQUERY

1 个答案: