当动态创建新div时，滚动函数触发太多时间 - AJAX JQUERY

我正在忙于制作一个懒惰的加载程序类型函数，当用户到达某个div的底部时加载一组新的数据。当动态创建新div时，滚动函数触发太多时间 - AJAX JQUERY

每当它增加新的内容时，计数器会因为某种原因触发太多时间，如果添加了两个新的容器，那么它会触发计数器两次，如果增加了4个容器，则计数器触发4次等等...

我似乎无法找到数据丢失的地方。也许别人可以帮忙！

如果需要，我还附加了一个指向JSON数据文件的链接。请让我知道如果你需要更多的东西！

CODE -

//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 { 
 
\t 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 { 
 
\t 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 { 
 
\t 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

来源

2017-08-03 Darian

因为每个'明信片（）'调用增加了一个新的'scroll'处理程序'.swiper-slide'这就要求'明信片（）'这增加了它调用'明信片一个新的'scroll'处理器（）' ... – Andreas

谢谢！我觉得很笨！请让这个答案！ – Darian

这帮助我找出问题所在。请让它成为答案，以便我可以标记正确！谢谢安德烈亚斯。 – Darian

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

来源

2017-08-03 14:43:11 Andreas

当动态创建新div时，滚动函数触发太多时间 - AJAX JQUERY

回答

相关问题