無限スクロールで途中から同じコンテンツが表示される

Question

実現したいこと

無限スクロールで画像と文字を表示させたいです。

発生している問題・分からないこと

68コンテンツを無限スクロールで表示したいのですが60までしか表示されない原因と、何度も同じコンテンツが表示される原因が分かりません。

該当のソースコード

<?php
/*
Template Name: que_list
固定ページ: 質問一覧画面
*/
get_header();
?>
<div id="feed4-layout">
    <div class="image-inline-player"></div>
    <div class="footer-test">	
    <p>© All rights reserved by dmmwebcampmedia.</p>	
    </div>
</div>
<script>
    var count = 0;
    $(function() {
        add()
        $(window).on("scroll", function() {
            if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
                add()
            }
        })
    });

    function add() {
        const formData = new FormData();
        formData.append("action", "bbs_que_list_items");
        formData.append("count", count);
        var url = '/groups/' + group_id + '/messages.json'
        const opt = {
            method: "post",
            body: formData
        }
        fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
            .then(response => {
                return response.json();
            })
            .then(json => {
                for (let idx = 0; idx < json.items.length; idx++) {
                    count++;
                    const item = json.items[idx];
                    const imageCardWrap = document.createElement("div");
                    imageCardWrap.classList.add("image-card-wrap");
                    imageCardWrap.style.display = "inline-block";
                    const link = document.createElement("a");
                    link.href = item.url;
                    const imageThumbnailCard = document.createElement("div");
                    imageThumbnailCard.classList.add("image-thumbnail-card");
                    if (item.type == "img") {
                        const img = document.createElement("img");
                        //img.style.height = "150px";
                        //img.style.width = "260px";
                        img.src = item.img1;
                        imageThumbnailCard.appendChild(img);
                    } else if (item.type == "video") {
                        const video = document.createElement("video");
                        //video.style.height = "150px";
                        //video.style.width = "260px";
                        video.src = item.img1 + "#t=0.1";
                        imageThumbnailCard.appendChild(video);
                    } else if (item.type == "iframe") {
                        const iframe = document.createElement("iframe");
                        //iframe.style.height = "150px";
                        //iframe.style.width = "260px";
                        iframe.src = item.img1;
                        imageThumbnailCard.appendChild(iframe);
                    } else {
                        const img = document.createElement("img");
                        //img.style.height = "150px";
                        //img.style.width = "260px";
                        img.src = "../wp-content/themes/sample_theme/images/alternative.png";
                        imageThumbnailCard.appendChild(img);
                    }
                    link.appendChild(imageThumbnailCard);
                    const imageTitleLink = document.createElement("div");
                    imageTitleLink.classList.add("image-title-link");
                    imageTitleLink.textContent = truncate(item.title, 20);
                    link.appendChild(imageTitleLink);
                    imageCardWrap.appendChild(link);
                    $(".image-inline-player").append(imageCardWrap);
                }
            })
    .catch(error => {
        console.log(error);
    });
    };

    function truncate(str, len) {
        return str.length <= len ? str : (str.substr(0, len) + "...");
    };
<script>

//質問掲示板一覧表示
function bbs_que_list_items()
{
    global $wpdb;
    $count = $_POST['count'];
    $sql = 'SELECT * FROM sortable LIMIT %d,10';
    $query = $wpdb->prepare($sql, $count);
    $rows = $wpdb->get_results($query);
    $result = [];
    foreach ($rows as $row) {
        $result['items'][] = ['title' => $row->title, 'img1' => '画像'.$row->ID];
    }
    echo json_encode($result);
    exit;
}
add_action('wp_ajax_bbs_que_list_items', 'bbs_que_list_items');
add_action('wp_ajax_nopriv_bbs_que_list_items', 'bbs_que_list_items');

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

スクロールを発生させるまでのコンテンツ数を広げてみたところ表示されるようになった種類が増えただけでした。

imageTitleLink.textContent = truncate(item.title, 30);

補足

※参考サイト
https://www.agent-grow.com/self20percent/2021/08/03/php%E3%81%A8ajax%E3%81%A7%E7%84%A1%E9%99%90%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/

Comments

[tabuu]

add処理が完了する前にadd処理が呼び出されているのではないでしょうか？
add関数が想定しているタイミングで呼び出されているか確認してみてください。

[yambejp]

「何度も同じコンテンツが表示される」
って無限スクロールはむしろそういう意図ではないのでしょうか？

[homepage-site]

tabuuさんアドバイスありがとうございます。
add関数が想定しているタイミングで呼び出されているか確認する方法が分からないのですが、どうすれば良いのでしょうか？

[tabuu]

とりあえずadd関数内でconsole.log('test')と固定の文字を出力するようにしてデベロッパーツールでコンソールを開きながらページをスクロールして確認するところから始めてはいかがでしょうか。

[homepage-site]

tabuuさんアドバイスありがとうございます。
add処理中かどうか確認したところエラーが出ておりました。
無限スクロールでコンテンツの終わりに達していた際に、json.items がないため length プロパティにアクセスできなかったようです。

※修正コード
for (let idx = 0; idx < json.items.length; idx++) {

let count = 0; //countから変更
let adding = false; //add処理判定フラグ（初期値：add未処理に設定）
$(function() {
add()
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
add()
}
})
});

function add() {
//add処理判定
if (adding) {
//add処理中のため抜ける
return;
}
adding = true; //add処理中に設定
const formData = new FormData();
formData.append("action", "bbs_que_list_items");
formData.append("count", count);

Answer 1

おそらく高さの計算がおかしいのだと思いますが再現できないのでなんとも言えません。
jsonを元に処理しているのであればscrollでaddさせるのは無意味だと思います。
(同じjsonを取得するなら前のjsonを再利用すればよいような・・・)

参考

高さで計算するのではなく交差で追加を判断すればよいかも

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const json_data=[1,2,3,4,5]; // jsonのデータは初回一回読めば良い
  const add=()=>{
    json_data.forEach(x=>document.querySelector('footer').before(Object.assign(document.createElement('div'),{className:"dummy",textContent:x})));
  }
  const io=()=>{
    const observer = new IntersectionObserver(changes=>{
      for (let change of changes) {
        if(change.intersectionRatio > 0) add();
      }
    });
    observer.observe(document.querySelector('footer'));
  }
  io();
});
</script>
<style>
.dummy{
height:80%;
}
.dummy:nth-child(odd){
  background-Color:gray;
}
</style>
<body>
<footer>footer</footer>
</body>

Comments

[yambejp]

高さで判定しない処理を参考で上げておきました

[homepage-site]

アドバイスありがとうございます。
1つお聞きしたいのですが、json_data の数を不特定多数にすることは可能でしょうか？
作成中の質問掲示板は1週間を期限に投稿された質問の数になる為、無限スクロールが何件になるか分からない状態です。

[yambejp]

jsonをfetchのたびに更新する想定であればadd内でjson_dataを取得すればよいでしょう。

[homepage-site]

yambejp さんアドバイスありがとうございます。
高さの計算について調べてみたところ、同様のコードで console を用いて確認されている方がおられたので、問題は tabuu さんにアドバイス頂いた add 処理にありました。
1スクロールが終わった際に json.items がないため length プロパティにアクセスできなかったようです。

Answer 2

add関数が想定しているタイミングで呼び出されているか確認したところ、
1スクロールが終わった際に json.items がないため length プロパティにアクセスできなかったようです。
for (let idx = 0; idx < json.items.length; idx++) { でエラーが発生しており、データがなかった場合は、json.itemsを要素ゼロの配列になるようにしておくことで正しく表示されました。

※エラー文
TypeError: Cannot read properties of undefined (reading 'length')

que_list.php

for (let idx = 0; idx < json.items.length; idx++) {

let count = 0; //countから変更
let adding = false; //add処理判定フラグ（初期値：add未処理に設定）
$(function() {
add()
$(window).on("scroll", function() {
if ($(window).scrollTop() + $(window).height() >= $("html").height()) {
add()
}
})
});

function add() {
//add処理判定
if (adding) {
//add処理中のため抜ける
return;
}
adding = true; //add処理中に設定
const formData = new FormData();
formData.append("action", "bbs_que_list_items");
formData.append("count", count);

functions.php

function bbs_que_list_items()
{
    global $wpdb;
    $count = $_POST['count'];
    $sql = 'SELECT * FROM sortable LIMIT %d,10';
    $query = $wpdb->prepare($sql, $count);
    $rows = $wpdb->get_results($query);
    $result = [];
    $result['items'] = [];
    $upload_dir = wp_upload_dir();