Project background

Long report page with multiple ECahrts charts and table project stacks: Vue2 + TypeScript

Demand for the target

The component sends an HTTP request to get data from the back end only when it enters the browser window to reduce concurrency on the server

Technical Implementation (Version 0.1.0)

The basic principle of

IntersectionObserver is used to monitor whether DOM elements enter the viewport IntersectionObserver document of the browser. A listener is set for each component instance. When the component instance enters the window, a callback is executed to send an HTTP request

The core code

// Listener class
class LazyOprationInToView {
  // Observer instance
  private observer: null | IntersectionObserver = null
  // Check whether you are in the observation state
  private isObservered = false
  // Re-observe
  public reobserve() {
    // This command is executed only when the state is not observed
    if (!this.isObservered && this.observer) {
      this.observer.observe(this.element)
      this.isObservered = true}}// Destroy the observer instance
  public dispose() {
    if (this.observer) {
      this.observer.disconnect()
      this.observer = null
      this.isObservered = false}}/ * * *@param The callback function executed by callback *@param Element monitors the DOM element */
  constructor(privatecallback: (... args:any) = >void.private element: HTMLElement) {
    // Create an observer instance
    this.observer = new IntersectionObserver((changes) = > {
      // Execute only when the element is visible
      if (changes[0].intersectionRatio > 0) {
        this.callback()
        if (this.observer) {
          // Unobserve the DOM element
          this.observer.unobserve(this.element)
          // The status is not observed
          this.isObservered = false}}}, {Emitted immediately when a DOM element overlaps with a viewport
      threshold: 0
    })
    // Check the DOM element
    this.observer.observe(this.element)
    // Under observation
    this.isObservered = true}}export {
  LazyOprationInToView
}

Copy the code

Use of the LazyOprationInToView class

In order to access in each option component LazyOprationInToView class instances, in. Vue component lazyOprationInToViewInstances top-level scope statement as a pointer

<script lang="ts">
const lazyOprationInToViewInstances: Record<string, LazyOprationInToView> = {}
</script>
Copy the code

A listener instance is created in the component’s Mounted lifecycle hook (this.$el is available when the component instance is already mounted)

mounted() {
  lazyOprationInToViewInstances[this.timeStamp.toString()] = new LazyOprationInToView(this.refreshChartInstances, this.$el as HTMLElement)
}
Copy the code

Correspondingly, the instance is destroyed in the beforeDestroy lifecycle hook

beforeDestroy() {
  lazyOprationInToViewInstances[this.timeStamp.toString()].dispose()
}
Copy the code

When some status values change, the component’s old data becomes invalid and a new HTTP request needs to be sent

watch: {
  select() {
    lazyOprationInToViewInstances[this.timeStamp.toString()].reobserve()
  }
}
Copy the code

link

NPM: doggy lazy-execute GitHub: doggy lazy-execute