Control pop-up sequence

Time:2020-10-19

One of the requirements in the work is to control the display sequence of pop-up window automatically when users enter the application.

Demand and status

When users enter the application, they will display a series of pop-up windows. The display content and display of these pop-up windows depend on a series of request results when entering the application. Due to the uncertain time of data returned from the interface request, the display order between pop-up windows depending on different interfaces is also uncertain. Moreover, multiple pop-up windows will have the problem of superimposed display, and the user experience is very poor.

The product requirement is that the display order of pop-up window can be controlled, and only one pop-up window can be displayed at the same time.

Solution

The solution is as follows:

Encapsulate an m-tier, and all pop-up windows are not displayed directly. Instead, the displayed processing functions are placed in the data of the m-tier, waiting for all dependent interfaces to request completion. That is, after the pop-up data is added to the m-tier, the pop-up display functions are executed in the given order.

According to this idea, I encapsulate a popcontrol class and expose the following APIs for the above points:

- popControl.reset (), which is used to reset the state window and the interface
- popControl.load (key) to mark that the interface has been requested
- popControl.push (key, callback, startdelay = 100, enddelay = 100, repeatpushshow = true)
- popControl.next (key) to mark that the pop-up window has been displayed

Project GitHub address: go to

use

When you use it, you need to instantiate a popcontrol first, and the constructor receives two parameters. The first parameter is an array of pop-up keys (sorted according to the display order), and the second parameter is an array of all interface dependent keys.

After the interface request is successful, load the corresponding key and push the pop-up window display function that depends on the interface into popcontrol. Until all interfaces are loaded, popcontrol will display pop-up windows in the order of popkeys. After each pop-up window is displayed, it is called popControl.next (key) to mark that the current pop-up window has been displayed to facilitate the display of the next pop-up window.

The example code is as follows:

import PopControl from "popControl"

const popKeys = ["pop1", "pop2", "pop3"];
const interfaces = ["ajaxSignin", "ajaxUseInfo"];
const popControl = new PopControl(popKeys, interfaces);

request("/ajaxSignin").then(() => {
  //Push the pop-up window display function that depends on this interface into the pop-up queue
  popControl.push("pop1", () => {
    //Show the operation of Pop1
    this.showPop1 = true;
  })
  popControl.push("pop2", () => {
    //Show the operation of Pop2
    this.showPop2 = true;
  })
  popControl.load("ajaxSignin);
})

request("/ajaxUseInfo").then(() => {
  //Push the pop-up window display function that depends on this interface into the pop-up queue
  popControl.push("pop3", () => {
    //Show the operation of POP3
    this.showPop3 = true;
  })
  popControl.load("ajaxUseInfo);
})

function pop1Close() {
  this.showPop1 = false;
  //The tag Pop1 has been displayed and the next pop-up window can be displayed
  popControl.next("pop1");
}

function pop2Close() {
  this.showPop2 = false;
  //The tag Pop2 has been displayed and the next pop-up window can be displayed
  popControl.next("pop2");
}

function pop3Close() {
  this.showPop3 = false;
  //The tag POP3 has been displayed and can display the next pop-up window
  popControl.next("pop3");
}

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]