代码之家 › 专栏 › 技术社区 › Alexander Kim

尽管存在条件语句-Vue2,仍会激发控制台日志消息

axios vue.js javascript

Alexander Kim · 技术社区 · 6 年前

我的代码的目的,就是开火 fetchNumbers() 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')
    }
  }
}

当我重新加载或输入页面时,我同时得到两个控制台输出:

default fired infinite fired

有时顺序是相反的。

更新。

调用的方法 获取数字()

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 onscroll公司 函数仍然是附加的,当我到达底部时,它会激发我的api调用,即使它不是数字页。是否可以将此功能仅限于数字页?

3 回复 | 直到 6 年前

Alexander Kim 6 年前

我不得不禁用 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)
    }
  }
}

devtech 6 年前

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

由于某种原因,created或showCats与window.onscroll同时被解雇。随机变化的顺序表明两种方法之间存在竞争条件。

更新

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

-1

Monirul Islam 6 年前

你可以接近单独的条件而不是if/else。

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