Блог

Я пытаюсь реализовать бесконечную прокрутку в моем расширении vue chrome. У меня есть этот код, но проблема в том, что при достижении нижней части страницы вызов ajax для извлечения новых данных запускается более одного раза. Как я могу исправить?

   mounted() {
    this.$store.commit('preloader', false)
    window.onscroll = () => {
      if( window.scrollY   window.innerHeight >= document.body.scrollHeight ){
        console.log('fired')
        this.nextPageLoaded = false 
        this.nextPage()
      }
    }
  },
  methods: {
    nextPage() {
      console.log('Loading next page')
      axios.get('https://localhost:8080/api/media')
      .then( (response) => {
        console.log(response.data)
        this.$store.commit('profileMedia', response.data.media)
        this.nextPageLoaded = true
      })
    }
  }
  

Я попытался, установив переменной nextPageLoad значение true после загрузки данных и значение false, когда событие прокрутки достигает нижней точки, но работает не так, как ожидалось. Любое решение будет оценено

Возможно, это опечатка, но я не вижу, что вы на самом деле используете nextPageLoaded свойство в качестве флага в if инструкции.

Это должно быть что-то вроде

 mounted() {
  this.$store.commit('preloader', false)
  window.onscroll = () => {
    if ( (window.scrollY   window.innerHeight >= document.body.scrollHeight)  
          amp;amp; !this.nextPageLoaded) {
      console.log('fired')
      this.nextPageLoaded = true 
      this.nextPage()
    }
  }
},
methods: {
  nextPage() {
    console.log('Loading next page')
    axios.get('https://localhost:8080/api/media')
      .then( (response) => {
        console.log(response.data)
        this.$store.commit('profileMedia', response.data.media)
        this.nextPageLoaded = false
      })
  }
}
  

Также имейте в виду, что я изменил значения назначений nextPageLoaded свойств, потому что я думаю, что это более интуитивно понятный способ (присваивается true сразу после запуска nextPage метода, присваивается false после завершения вызова AJAX).