How to implement batch loading of data

Loading data in batches

Recently, I am writing a vue project. Because the amount of data returned in the background is too large, I couldn't handle it when I called Gaode Map to render the "polygon" cover, so I jumped out directly. Then the little brother in the background told me that it could be processed in batches~ I didn't expect it to be much faster, and it's better to go through it by hand~ I'm not sure it's much faster. It's better to go through it by hand~, record it here! ! !

First we need to define four global variables

pagindexpage number
pagesizeHow many pieces of data to request on a page
pagetotalHow many times do you need to request in total (total number/pagesize), it is always returned from the background~
intertimerThe stored timer function is convenient for clearing the timer

export default {
  name: "map_app",
  inject:['reload'],
  data() {
    return {
      pagindex: 1, //page number      pagesize: 300, //Page/Number of      pagetotal: 0, //Total number of requests      intertimer: null, //Timer     }
   }
}

Then write a timer in methods and let the timer execute another method every three seconds;

//TimergetPageInter(map) {
   = this.$loading({ //Loading layer        lock: true,
        text: "Loading desperately",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
    });
 
     = setInterval(() =&gt; {
       (map); // Call the method every three seconds      }, 3000);
 },

Then we make a judgment in this method. If the number of pages currently requested exceeds the total number of times to be requested, the timer will be clear!

//Timer 2intervalData(map) {
   if ( &gt; ) {
        clearInterval(); //Switch off the timer        (); //Close the pop-up window         = 1;
    } else {
        (map); //Data rendering         += 1;
      }
},

The total number is returned by the little brother in the background. Every time we go to request the interface, we have to pass on to the background which page is currently on, and how many pieces of data we have to request.

renderMesh(map) { 
     this.$axios
       .get( + "/api/Main/GetBlockMap", {
          params: {
            BlockCode: ,
            page: , //Current page number            rownum:  //Request quantity          }
      })
      .then(res =&gt; {
       (res);
      })
      .catch(err =&gt; {
       ("Request failed 233");
       });
}

Because my total number is another interface called, and I will write the code as well.

    this.$axios
    .get( + "/api/Main/GetBlockMapCount", {
          params: {
            BlockCode: 
          }
     })
     .then(res =&gt; {
          let jsonData = eval("(" +  + ")");
          //Total number of data is divided into how many pieces of data are requested each time, which will be obtained by deriving how many times it will be requested in total           = ( / ); 
      })
      .catch(err =&gt; {
          ("Request failed");
      });

Scrolling data

Core method:

handleScroll: function () {
      var scrollTop =
         || ;
      var windowHeitht =
         || ;
      var scrollHeight =
         || ;
      if (scrollTop + windowHeitht >= scrollHeight - 2000) {
        if () {
          ();
        }
      }
    },
    GetSpecialData() {
       = false;
      ++;
      (, );
    },

monitor:

 mounted() {
    ("scroll", );
  },
  destroyed() {
    ("scroll", , false);
  },

The above is personal experience. I hope you can give you a reference and I hope you can support me more.