編集: 残念ながら、回答と提案は問題を完全には解決していません。これが問題だと思うので、スクロールを使用するのではなく、「投稿をもっと見る」ボタンに切り替える必要があるかもしれません。どこにも見つからないので、最終的にこれに対する解決策を得ることができれば素晴らしいことです。
私の解決策は、タイムアウトイベントを追加することでした。ひどく汚い。これ:
complete: function (data) {
setTimeout(function() {
$("#loading-posts").fadeOut("fast");
$isFetchingNotes = false;
}, 1000);
}
私は自分のウェブサイト用のカスタムブログを書きました。ユーザーがスクロールすると、古い投稿が表示され、JQuery AJAX を通じて自動的に読み込まれます。これは機能していますが、必要以上に 2、3、または 4 回データを取得しているようです。実際には、データを一度だけ取得したいのです。そのため、「実行中」タイプの変数を入れましたが、それも機能せず、データを複数回フェッチして投稿を複製します。これが私のコードです:
$(window).scroll(function(){
var $scroll = $(window).scrollTop();
var $docHeight = $(document).height();
var $winHeight = $(window).height();
var $lastPost = ($(".note-area:last").attr("id") - 1);
if($scroll === $docHeight - $winHeight) {
if(!$isFetchingNotes) {
var $isFetchingNotes = true;
$("div.more-posts").show();
$("#loading-posts-gif").fadeIn("slow");
$.ajax({
type: "GET",
url: 'loadnotes.php" ?>',
data: {
'lastPost': $lastPost
},
cache:true,
success: function(data) {
if(data) {
$('div#post-area').append(data);
$('div.more-posts').hide();
} else {
$('div.more-posts').replaceWith("<h4>-- End of notes --</h4>");
}
},
complete: function () {
$("#loading-posts").fadeOut("fast");
}
}).error(function (event, jqXHR, ajaxSettings, thrownError) {
$('div.more-posts').html("<h2>Could not retrieve data</h2>");
});
$isFetchingNotes = false;
} // End if $isfetchingnotes
} // End if scroll load point
}); // End onscroll event
$isFetchingNotes 変数が true に設定されているにもかかわらず、データをフェッチし続けようとしている理由を誰かが明らかにしてくれませんか? ありがとうございました!