Question

我的代码目的是当用户滚动页面底部（某种无限滚动）时触发fetchNumbers()（从API获取数字）。我在axios promise（然后）中遇到条件问题，因为它同时触发两个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函数。我的APP中有3个页面：主页，数字页面，联系页面。如果我转到数字页面（安装了onscroll功能的页面），然后转到主页或联系页面，则此onscroll函数仍然处于连接状态，当我到达最底端时-即使它是不是数字页面。是否可以仅将此功能限制为数字页？

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');
}

由于某些原因，与window.onscroll同时触发了createCats或showCats。随机变化的顺序表明这两种方法之间存在竞争条件。

更新

只要您将所需的页面嵌套在div中，且其ID为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')
       }
    })

尽管有条件语句，控制台日志消息仍会触发-Vue2

3 个答案: