无限滚动重复ajax调用

我很难计算如何避免重复ajax调用我的无限滚动JavaScript代码。它主要工作，但有时我有2或3次相同的Ajax页面调用导致一种循环。如何避免这种情况？感谢无限滚动重复ajax调用

//infiniteScroll 
var currentPage = 1; 
var intervalID = -1000; 
var scroll = false; 

$('document').ready(function(){ 
    if (scroll == true) { 
     if (window.location.pathname == "/" && window.location.search == "" && $('#items_container').length > 0) { 
      $('.pagination').hide(); 
      intervalID = setInterval(checkScroll, 300); 
     } 
    }; 
}) 

function checkScroll() { 
    if (nearBottomOfPage()) { 
     currentPage++; 
    jQuery.ajax('?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get', 
     beforeSend: function(){ 
      var scroll = false; 
      $('.spinner').show();    
     }, 
     success: function(data, textStatus, jqXHR) { 
      $('.spinner').hide(); 
      $('#items_container').append(jQuery(data).find('#items_container').html()); 
      var scroll = true; 
      if(typeof jQuery(data).find('.item').html() == 'undefined' || jQuery(data).find('.item').html().trim().length == 0 || currentPage == 10){ 
       clearInterval(intervalID); 
     } 
    },}); 
    } 
} 
} 

function nearBottomOfPage() { 
    return scrollDistanceFromBottom() < 450; 
} 

function scrollDistanceFromBottom(argument) { 
    return pageHeight() - (window.pageYOffset + self.innerHeight); 
} 

function pageHeight() { 
    return Math.max(document.body.scrollHeight, document.body.offsetHeight); 
}

来源

2014-04-11 Jonnyx Delavilla

增加新的数据每一次，你有充分的时间AJAX调用 –

你*会*得到多个触发事件与您的代码，所以你需要标志负载进行中状态，例如通过属性。使用该属性决定调用您的Ajax代码，因此您不会重复请求相同的页面。完成后（成功或失败），清除该属性。你也可以尝试一下那里的许多免费无限滚动条。有些是符合Google的（通过使用页面上现有的分页链接）。 –

它看起来像checkScroll函数被调用每300毫秒，它可能是一个AJAX请求将需要更长时间。

我看你们还滚动变量，但只检查其初始文档加载，这将不会影响定时器的值。

我建议在看看听滚动事件，而不是创建一个定时器：jQuery docs。然后，您可以做类似以下，以防止运行两个Ajax调用：

var ajaxRunning = false; 

function checkScroll() { 
    if (!ajaxRunning && nearBottomOfPage()) { 
     currentPage++; 

     ajaxRunning = true; 

     jQuery.ajax('?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get', 
     beforeSend: function(){ 
      $('.spinner').show();    
     }, 
     success: function(data, textStatus, jqXHR) { 
      $('.spinner').hide(); 
      $('#items_container').append(jQuery(data).find('#items_container').html()); 
      if(typeof jQuery(data).find('.item').html() == 'undefined' || jQuery(data).find('.item').html().trim().length == 0 || currentPage == 10){ 
       clearInterval(intervalID); 
     }, 
     complete: function() { 
      ajaxRunning = false; 
     } 
    },}); 
    } 
}

来源

2014-04-11 13:08:35 happyjack

您的解决方案工作正常:) 谢谢 –

异步设置为false，或创建一个变量，像

var isLoading = false;

在送它设置为true之前。成功的时候再次设置为假。在发送ajax调用之前，请检查isLoading是否不正确。如果是，则退出函数或使用微调器放置一个循环，微调器将检查isLoading值，以便在isLoading设置为false后首先触发ajax。

例子：

function checkScroll() { 
    if (nearBottomOfPage() && isLoading === false) { 
    currentPage++; 

    jQuery.ajax('?page=' + currentPage, {asynchronous:true, evalScripts:true, method:'get', 
    beforeSend: function(){ 
     var scroll = false; 
     $('.spinner').show(); 
     isLoading = true;    
    }, 
    success: function(data, textStatus, jqXHR) { 

     $('.spinner').hide(); 
     $('#items_container').append(jQuery(data).find('#items_container').html()); 
     var scroll = true; 
     if(typeof jQuery(data).find('.item').html() == 'undefined' || jQuery(data).find('.item').html().trim().length == 0 || currentPage == 10){ 
      clearInterval(intervalID); 
      isLoading = false; 
     } 
    }, 
    }); 
    }}}

来源

2014-04-11 13:11:32 jPO

无限滚动重复ajax调用

回答

相关问题