Firestore возвращает целые данные дважды за один вызов - PURE JAVASCRIPT - PullRequest
Новая
       111

Firestore возвращает целые данные дважды за один вызов - PURE JAVASCRIPT

0 голосов
/ 07 мая 2020

Я сейчас работаю над проектом. Когда я прокручиваю вниз, он получает больше данных из облачного хранилища, как при бесконечной прокрутке.

Это ссылка на мой код на jsfidlle - щелкните здесь

Сначала я инициализирую firebase и получаю первые 5 документов, которые отлично работают. 

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// firebase.analytics();
const db = firebase.firestore();

const ul = document.querySelector("ul");

var i = 1; 
var lastVisible;

//getting category blocks
db.collection("chats")
  .limit(4)
  .get()
  .then((snapshot) => {
    snapshot.forEach((doc) => {

      ul.innerHTML += `<li><h3>${doc.data().message} </h3><p>-Initial data, comes when page loads<br> <br> <br> <br></p></li>`
    });

    lastVisible = snapshot.docs[snapshot.docs.length - 1]; // stores the last document for startAfter() Method
  })
  .catch((error) => {
    console.log("Error getting documents: ", error);
  });

Но когда я получаю следующие документы, когда пользователь прокручивает до конца, это неожиданно получает все данные дважды. 


//getting next category blocks
window.onscroll = function (ev) {
  if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {
    //getting category blocks
    db.collection("chats")
      .startAfter(lastVisible)
      .limit(2)
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          ul.innerHTML += `<li><h3>${doc.data().message} </h3></li>`

        });

        lastVisible = snapshot.docs[snapshot.docs.length - 1]; 
      // stores the last document for startAfter() Method in next call
      })
      .catch((error) => {
        console.log("Error getting documents: ", error);
      });
  }
};

Я новичок в веб-разработке и не знаю других языков, кроме HTML, CSS и JavaScript. Я не знаком с jquery, поэтому, пожалуйста, помогите мне в PURE JS ребята.

Это мой код на jsfidlle - - нажмите здесь

...