मेरे कोड का उद्देश्य, आग लगाना है fetchNumbers() (जो एपीआई से नंबर प्राप्त करता है) जब कोई उपयोगकर्ता पृष्ठ के नीचे स्क्रॉल करता है, किसी प्रकार का अनंत स्क्रॉल। मैं 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।

अपराधी मिला - इसे एक उत्तर में पोस्ट करेंगे।

अपडेट ३.

समस्या वास्तव में onscroll फ़ंक्शन के साथ है। मेरे एपीपी में 3 पृष्ठ हैं: मुख्य पृष्ठ, संख्या पृष्ठ, संपर्क पृष्ठ। यदि मैं संख्या पृष्ठ पर जाता हूं (जहां ऑनस्क्रॉल फ़ंक्शन माउंट किया गया है), तो मुख्य या संपर्क पृष्ठ पर जाएं, फिर यह onscroll फ़ंक्शन अभी भी संलग्न है और जब मैं नीचे पहुंचता हूं - यह मेरे एपीआई कॉल को सक्रिय करता है, भले ही यह नंबर पेज नहीं। क्या इस फ़ंक्शन को केवल संख्या पृष्ठ तक सीमित करना संभव है?

1
Alexander Kim 1 अक्टूबर 2018, 13:04

3 जवाब

सबसे बढ़िया उत्तर

मुझे 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)
    }
  }
}
0
Alexander Kim 2 अक्टूबर 2018, 06:42

आप इसके बजाय अलग स्थिति से संपर्क कर सकते हैं if/else उदा।

.then((resp) => {
       if (type === 'infinite') {
         console.log('infinite fired')
       }
       if (type === 'default '){
         console.log('default fired')
       }
    })
-1
Monirul Islam 1 अक्टूबर 2018, 13:16

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

विंडो.ऑनस्क्रॉल के साथ ही किसी कारण से या तो बनाई गई या शोकैट को सक्रिय किया जा रहा है। बेतरतीब ढंग से बदलते क्रम दो तरीकों के बीच दौड़ की स्थिति का सुझाव देते हैं।

अपडेट करें

यह काम करना चाहिए, बशर्ते आपने id="number_page_div_id" के साथ एक div में वांछित पृष्ठ नेस्टेड किया हो (आपको शायद उस तत्व की ऊंचाई और स्थिति को समायोजित करना पड़ सकता है):

created () {
  let element = getElementById('numbers_page_div_id');
  element.onscroll = () => {        
    let bottomOfWindow = element.scrollTop + window.innerHeight > element.offsetHeight - 1;
    if (bottomOfWindow) {
      this.fetchNumbers('infinite')
    }
  }
}
0
devtech 2 अक्टूबर 2018, 12:44