When there is a lot of data, not a page display, at the same time a request for data is too large, will increase the page rendering time, affect the experience, and do not want to do paging, this is very suitable for lazy loading. Click “like” before you watch it to make it a good habit hahaha

Before we can understand how it works, we need to distinguish three properties:

ScrollHeight: The total height of the element, including the contents of the scroll bar. Read-only property. No px units

ScrollTop: The distance by which the content is scrolled up by dragging the scrollbar down when the element appears. Readable and writable properties.

ClientHeight: The size of the element’s client area, which refers to the amount of space occupied by the element’s content and its borders, is essentially the size of the viewable area. .

Scrollheight-scrolltop-clientheight = 0

Lazy loading 

 handleScroll(event) {

      // In standard browsers: define a parameter event, but when the event is fired and no actual value is assigned to the event, the browser will assign the object of "event" to the parameter E, which is a system-level object: event;

      const scrollDistance =

        // The full text of the text is high

        event.target.scrollHeight -

        // The height of the roll

        event.target.scrollTop -

        // Width of the visible area

        event.target.clientHeight;

      // If the scrollbar distance to the bottom is less than or equal to 0, the interface can be requested

      if (scrollDistance <= 0 ) {

        // This switch is used to prevent the request data from being requested again

        if (this.onOff) return;

        this.onOff = true;

        // The current page count and total page count are saved on the first request

        let pageNum = this.pageNum;

        // If the current number of pages is less than the total number of pages

        if (pageNum < this.pages) {

          pageNum += 1;

          let data = { pageNumber: pageNum, pageSize: 10 };

          // Start requesting data

          enquiryAllList(data).then(res= > {

            this.onOff = false;

            this.pageNum = res.result.pageNum;

            this.tableData = this.tableData.concat(res.result.list);

          });

        }

      }

    },

Copy the code

If you don’t do the anti – shake or marking, the request is also relatively slow can cause problems

Throttling function

Here are the blog performance optimizations for anti-shake and throttling by referring to the big guy’s Anti-shake and Throttling
throttle(fn, wait) {

      let context, args;

      let previous = 0;

      return function() {

        let now = +new Date(a);

        context = this;

        args = arguments; // throttle executes the scope's this

        if (now - previous > wait) {

          fn.apply(context, args); // Apply throttle.fn(args) to the object you are throttling;

          previous = now;

        }

      };

Copy the code

Lazy loading Plus Throttling edition 

handleScroll(event) {

      // In standard browsers: define a parameter event, but when the event is fired and no actual value is assigned to the event, the browser will assign the object of "event" to the parameter E, which is a system-level object: event;

      const scrollDistance =

        // The full text of the text is high

        event.target.scrollHeight -

        // The height of the roll

        event.target.scrollTop -

        // Width of the visible area

        event.target.clientHeight;

      // If the scrollbar distance to the bottom is less than or equal to 0, the interface can be requested

      if (scrollDistance < = 0 ) {

        // This switch is used to prevent the request data from being requested again

        if (this.onOff) return;

        this.onOff = true;

        // The current page count and total page count are saved on the first request

        let pageNum = this.pageNum;

        // If the current number of pages is less than the total number of pages

        if (pageNum < this.pages) {

          pageNum += 1;

          let data = { pageNumber: pageNum, pageSize: 10 };

          enquiryAllList(data).then(res= > {

            this.onOff = false;

            this.pageNum = res.result.pageNum;

            this.tableData = this.tableData.concat(res.result.list);

          });

        }

      },

    / / throttling

    throttle(fn, wait) {

      let context, args;

      let previous = 0;

      return function() {

        let now = +new Date(a);

        context = this;

        args = arguments; // throttle executes the scope's this

        if (now - previous > wait) {

          fn.apply(context, args); // Apply throttle.fn(args) to the object you are throttling;

          previous = now;

        }

      };

    },

Copy the code

About the call

If you do not encapsulate the direct call, a new (anonymous) function is created for each call (see MDN)

 throttleFun(event) {

      this.throttle(this.handleScroll(event), 1000);

    }

Copy the code

And then in mounted

 window.addEventListener("scroll".this.throttleFun, true);

Copy the code

The last

From the usual work records quite practical method, quick to praise collection to facilitate the next use! Leave your suggestions in the comments section

Dry recommended

JavaScript elegant writing and SAO operation

End of the year interview JavaScript summary (extra hard)

React series – Learn Hooks easily

TypeScript implements Map and HashMap