Precautions for realizing "real-time data response" on the page

Suppose we need to implement a function , On the left side of the page is a multi choice list , On the right side of the page is the data displayed after the data request according to the selected value .

One 、 Normal operation

After the user checks , Click the OK button , Just send a request to the backstage , Then the rendering on the right shows .

This form , The request is a selected list as a parameter .

This kind of operation will have a problem for users ：
Question 1 ： user Click ok after , Interface 5s Then the data is returned , At this point the user Uncheck example 4, Then click ok , At this time, the user wants to delete data 4 None of them came back , Will cause the program to report an error .

If this is the way , Then we need to do two things ：

1、 OK button The stabilization of
2、 Disable before the last data request returns OK button

This ensures that each new operation of the user will not affect the result of the previous operation .

Two 、 Real time data response

There is no OK button for real-time data response , The operation here is , The user checks one , Immediately send a request to the backstage . That is, check one at a time , Or uncheck , On the right are real-time responses .

The page is implemented in this way , The user experience will be a little better , The user has reduced one button click , On the right is the real-time change .
But there are two ways besides Question 1 , There will be ：
Question two ： Users quickly click to select , If the user selects 5 individual , Just send it to the back stage 5 Secondary parallel request , If the fourth request is returned after the fifth , Then there will be problems in the data display ：

• If every time the list data overwrites the last processing , Then only 4 Data ;
• If it is an incremental request , That is, only one request at a time , Return to one , The page is based on the returned data push, Then there will be dislocation in the order

Question 3 ： If the user quickly selects , And quickly cancel all the selections . At this time, the left side is not selected , Don't send a request to the backstage , On the right, the list is cleared , But the previously selected request may return data a long time later , This is the time , The page will appear with nothing selected on the left , Data display on the right .

The page is implemented in this way , Then we need to do ：

1、 Check box group Selected events Conduct throttling treatment , stay 1s Internal trigger multiple times , Only the latest one
2、 Disable all... Until the last data request is returned Check box
3、 After the last data return , Just execute the new request

3、 ... and 、 Code implementation example

Take real-time data display as an example ：

1、 Throttling treatment

/** * lodash The throttling function of  */
handle: _.throttle(function() {
    
  //  Process the selected data , Such as sending a request 
}, 1000, {
    
  leading: true,
  trailing: false
}),

2、 Disable processing
For example, now on the left is the checkbox tree （el-tree）：

//el-tree One in disabled attribute , Allow to pass in a function : 
:disabled="disabledFunc"

//  Disable All 
const disabledFunc = () => false

//  node key by 1200 Disabled 
const disabledFunc = (data, node) => {
    
	if (node.key === '1200') {
    
		return true
	}
	return false
}

3、 Request sequential processing

data() {
    
   return {
    
     preRequest: Promise.resolve(),
   }
 },
 
//  Each data request is assigned to a variable 
getData() {
    
	this.preRequest = getDataByInfo(params).then((res) => {
    
		//  Processing code ...
		return
	}
}

//  Selected data change detected 
handleChange() {
    
	//  Make sure to send it after the next request comes back 
	this.preRequest.then(() => {
    
	  this.getData()
	})
}