2017-08-03 34 views
0

我正在忙於製作一個懶惰的加載程序類型函數,當用戶到達某個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

+1

因爲每個'明信片()'調用增加了一個新的'scroll'處理程序'.swiper-slide'這就要求'明信片()'這增加了它調用'明信片一個新的'scroll'處理器()' ... – Andreas

+0

謝謝!我覺得很笨!請讓這個答案! – Darian

+0

這幫助我找出問題所在。請讓它成爲答案,以便我可以標記正確!謝謝安德烈亞斯。 – Darian

回答

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