無限スクロールで稀に2回データが取得されてしまう

Question

コメント欄に無限スクロール機能を実装しています。YouTubeのコメント欄のような感じで、スクロールバーが最下部に達すると、新しくコメントを取得して描画するような処理を行なっています。

  let scrollLock = false;
　
  // 取得したコメントを描画する関数
  const loadCommentsIntoSection = (postedComments) => {
    let html = '';
    postedComments.forEach((comment) => {
      const { time, content, createdBy } = comment;
      const displayTime = calculateTimeDiffer(time);
      html += '<div class="comment-box">'
      html += `<div id="picture-parent"><img src="${createdBy.picture}" id="user-picture"></div>`;
      html += `<div id="comment-body"><p>${createdBy.displayName} ${displayTime}</p><p>${content}</p></div>`;
      html += '</div><hr>';
    });
    createLoadingElm();
    setTimeout(() => {
      commentContainer.insertAdjacentHTML('beforeend', html);
      destroyLoadingElm();
      scrollLock = false; // コメントを取得して描画した後にスクロールロックを解除する
    }, 2000);
  };
　
  // コメントを取得して描画する関数(offset=0で最初の10件, offset=10で次の10件...）
  const getComments = (offset) => {
    if (!offset) offset = 0;

    fetch(`/questions/${questionId}/comments.json?limit=10&offset=${offset}`).then((response) => {
      response.json().then((result) => {
        const { Comments } = result;
        console.log(Comments);
        loadCommentsIntoSection(Comments);
      });
    });
  };

  window.onscroll = () => {
    console.log(scrollLock);
　　// スクロールがロックされているときはデータの取得を中断する
    if (scrollLock) return;
　　// スクロールバーが画面最下部に移動した時
    if (this.innerHeight + this.pageYOffset >= document.body.scrollHeight) {
      fetch(`/questions/${questionId}/comments.json`).then((response) => response.json().then((result) => {
        const { Comments } = result;
        const numOfComments = Comments.length; //すべてのコメントの数
        const commentsLength = document.querySelectorAll('.comment-box').length;　// 取得したコメントの数
        if (numOfComments === commentsLength) return; // 取得したコメント数がすべてのコメント数に達したらデータの取得を中断する
        scrollLock = true; //コメントを取得している最中はスクロールをロックする
        getComments(commentsLength); 
      }));
    }
  };

基本的にはうまく動作するのですが、たまに同じ範囲のコメントが重複して取得されてしまうので、その原因を特定したいと思っています。

スクロール時にスクロールロックを、コメント取得時に取得したコメントを出力したところ、下画像のように本来falseとtrueの間に10件読み込まれるべきコメントが20件読み込まれています。

怪しいとすればスクロール位置の指定かと思うのですが、自力で原因を把握できなかったため質問させていただきました。

分かる方いらっしゃいましたらご教授いただけると幸いです。

Answer 1

scrollLock = true をリクエスト(一定時間かかる）の後に行っているため、リクエストの最中はロックされていないかと思いました。

 window.onscroll = () => {
    console.log(scrollLock);
    if (scrollLock) return;

    if (this.innerHeight + this.pageYOffset >= document.body.scrollHeight) {
      // リクエストする前にロック
      scrollLock = true;

      fetch(`/questions/${questionId}/comments.json`).then((response) => response.json().then((result) => {
        // このブロックはリクエスト ( 100ms なり 1000ms なり HTTPにかかった時間）後に実行される
        const { Comments } = result;
        const numOfComments = Comments.length;
        const commentsLength = document.querySelectorAll('.comment-box').length;
        if (numOfComments === commentsLength) return;
        // scrollLock = true; 
        getComments(commentsLength); 
      }));

Comments

[maskmelon]

ご指摘の通り、リクエスト前にスクロールをロックすると正しく動作するようになりました。
的確な回答をくださりありがとうございました。