Сообщение журнала консоли запускается независимо от оператора условия - Vue2

Question

Цель моего кода - запустить fetchNumbers() (который выбирает числа из API), когда пользователь прокручивает нижнюю часть страницы, что-то вроде бесконечной прокрутки.У меня возникла проблема с условием внутри обещания axios (тогда), потому что он запускает два console.log выхода одновременно.Кажется, что условие вообще игнорируется.

Метод, который я использую:

methods: {
fetchNumbers (type = 'default', offset = 0, limit = 0) {
  return axios.get(globalConfig.NUMBERS_URL)
    .then((resp) => {
       if (type === 'infinite') {
         console.log('infinite fired')
       } else {
         console.log('default fired')
       }
    })
}

Монтируемая функция (где я подозреваю проблему):

mounted () {
  window.onscroll = () => {
    let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight > document.documentElement.offsetHeight - 1
    if (bottomOfWindow) {
      this.fetchNumbers('infinite')
    }
  }
}

Когда яперезагрузите страницу или войдите в нее, я получаю 2 консольных выхода одновременно:

default fired infinite fired

Иногда порядок меняется.

ОБНОВЛЕНИЕ.

Методы, которые вызывают fetchNumbers()

async created () {
  await this.fetchNumbers()
}

showCats (bool) {
  this.showCategories = bool

  if (!bool) {
    this.category = [1]
  } else {
    this.category = []
  }
  this.isActive = true
  this.fetchNumbers()
}

ОБНОВЛЕНИЕ 2.

Нашли виновника - постятэто в ответе.

ОБНОВЛЕНИЕ 3.

Проблема действительно с функцией onscroll.У меня есть 3 страницы в моем приложении: главная страница, страница с номерами, страница контактов.Если я перехожу на страницу с номерами (где установлена ​​функция прокрутки), затем на главную страницу или на страницу контактов, тогда эта функция onscroll все еще включена, и когда я достигаю дна - она ​​запускает мой вызов API, даже если это нестраница номеров.Можно ли ограничить эту функцию только страницей с числами?

Answer 1

fetchNumbers наиболее точно вызывается дважды.Попробуйте зарегистрировать каждый контекст как тип.

fetchNumbers (type = 'default', offset = 0, limit = 0) {
   return axios.get(globalConfig.NUMBERS_URL)
     .then((resp) => {
       if (type === 'infinite') {
         console.log(type,'infinite fired');    //this will always print 'infinite', 'inifinite fired'
       } else {
         console.log(type,'default fired');     //this will print the caller's name and 'default fired'
         type = 'default';                      //after logging reset type to 'default' to continue the execution
       }
     })
}

async created () {
  await this.fetchNumbers('created');
}

showCats (bool) {
  this.showCategories = bool

   if (!bool) {
     this.category = [1];
   } else {
     this.category = [];
   }
   this.isActive = true
   this.fetchNumbers('showCats');
}

Либо создан, либо showCats по какой-то причине запускается одновременно с window.onscroll.Случайно изменяющийся порядок предлагает условие гонки между двумя методами.

ОБНОВЛЕНИЕ

Это должно сработать, если вы вложили нужную страницу в элемент div с id = "number_page_div_id" (возможно, у вас естьотрегулировать высоту и положение этих элементов):

created () {
  let element = getElementById('numbers_page_div_id');
  element.onscroll = () => {        
    let bottomOfWindow = element.scrollTop + window.innerHeight > element.offsetHeight - 1;
    if (bottomOfWindow) {
      this.fetchNumbers('infinite')
    }
  }
}

Answer 2

Мне пришлось отключить onscroll прослушиватель на destroy:

destroyed () {
  window.onscroll = null
}

Поэтому, когда я захожу на главную страницу или страницу контактов, этот слушатель не присоединяется.

Такжемне пришлось переместить onscroll слушателя с mounted на created, потому что, когда он был в mounted (), он стрелял дважды:

created () {
  window.onscroll = () => {
    let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight > document.documentElement.offsetHeight - 1
    if (bottomOfWindow) {
      this.isActive = true
      this.fetchNumbers('infinite', counter++ * this.limit)
    }
  }
}

Answer 3

вы можете подойти к отдельному условию вместо if / else, например

.then((resp) => {
       if (type === 'infinite') {
         console.log('infinite fired')
       }
       if (type === 'default '){
         console.log('default fired')
       }
    })