Question

我很难找到如何避免重复的ajax调用我的无限滚动javascript代码。它主要工作，但有时我有相同的ajax页面调用2或3次导致一种循环。怎么避免这个？感谢

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

Answer 1

看起来每300毫秒调用一次checkScroll函数，并且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;
        }
    },});
  }
}

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

无限滚动复制ajax调用

2 个答案: