无限滚动重复ajax调用答案

【问题标题】：infinite scroll duplicate ajax call无限滚动重复ajax调用
【发布时间】：2023-04-06 02:33:01
【问题描述】：

我很难弄清楚如何避免对我的无限滚动 JavaScript 代码进行重复的 ajax 调用。它主要工作，但有时我有 2 或 3 次相同的 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);
}

【问题讨论】：

每次添加新数据，每次都要调用ajax
您将使用您的代码获得多个触发事件，因此您需要标记正在加载的状态，例如通过一个属性。使用该属性来决定调用您的 Ajax 代码，这样您就不会重复对同一页面的请求。完成（成功或失败）后，您将清除该属性。您不妨尝试其中的众多免费无限滚动条。有些符合 Google 标准（利用页面上现有的分页链接）。

标签： javascript jquery ajax infinite-scroll endlessscroll

【解决方案1】：

看起来 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;
        }
    },});
  }
}

【讨论】：

【解决方案2】：

将 async 设置为 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;
        }
    },
  });
  }}}

【讨论】：