1

無限スクロール JavaScript コードの重複した ajax 呼び出しを回避する方法を理解するのに苦労しています。ほとんどの場合は機能しますが、同じ 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);
}
4

2 に答える 2

2

checkScroll 関数が 300 ミリ秒ごとに呼び出されているように見えますが、AJAX リクエストがそれよりも長くかかる可能性があります。

スクロール変数があるようですが、最初のドキュメントの読み込み時にその値をチェックしているだけで、タイマーには影響しません。

タイマーを作成する代わりに、スクロール イベントをリッスンすることをお勧めします: jQuery docs。次に、次のようなことを行って、2 つの 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-11T13:08:35.290 に答える