Scenario Description:

In our usual development process, we often encounter such a situation. Fuzzy search or associative association in the search function.

This requires us to send a request every time we change the data in the input box. Problems arise when changes are made multiple times in a short period of time.

The request for each operation returns data, sometimes for a long time, sometimes for a short time. As you all know, Ajax requests are asynchronous by default, and each request and subsequent action is performed independently. When the same request occurs more than once, it ends up displaying the latest data on the page, not the absolute last request. .

What we want, of course, is the presentation of the last requested data. So let’s say that the absolute last time we do it is the last time we do it. There are two solutions:

First, use timers to limit the number of requests.

Ensure that the input box changes several times within a certain period of time, send only the last change operation request.

This approach has great advantages. First, it solves the problems described above to a certain extent. Second, it reduces the number of requests, reducing the workload on the server and browser.

But it still has disadvantages.

1. That is the control of time interval. You don’t know how long each request will take. You don’t know how many Settings are appropriate.

2. You don’t know what kind of customers you’re dealing with. Even if you meet the conditions set in 1, and your client performs anti-human operations, typing letters at the intervals you set, your work is still wasted.

Based on the above two points, I do not like to use this method to solve the problem, so the code is not up, you know the idea, the logic of their own comb. (Absolutely not small editor did not tidy up, just do not send code.)

Second, ajax-based termination functions

Repeat requests that are not completed are terminated, and only the previous Ajax request is terminated. New requests are not terminated until the next one is sent.

In this method, it is important to note that each Ajax function has its own name, and that different ajax function names define different Ajax requests. You can only terminate your own Ajax request.

There are pros and cons to this approach.

Advantages: No matter how anti-human the customer is, no matter how time-consuming the data request is, he can ensure that the data returned and manipulated is the most requested data.

Disadvantages: requests are sent every time data changes are made in the input box, meaning it cannot reduce the number of requests. And if you stop, you’re just not doing the rest of the Ajax front-end, and you’re still doing the back-end work.

All right, so these two methods are going to look something like this, so if you want to combine them, you can sort them out. Next, I’ll just upload the code for the second method, just for reference. We hope to correct the deficiencies.

var AllAjax={
 commonAjax =function (interface,params,callback,flag) {
 var data={};
 $.each(params,function(i,v){ data[i]=v; }); // allajax. closeError This object element is used to identify the desired value in an Ajax error function.if(AllAjax[interface]){
 AllAjax[interface].abort();
 AllAjax.closeError=false;
 }
 AllAjax[interface]=$.ajax({
 type: "post",
 url: interface,
 data: params,
 dataType: "json",
 success: function(data){
 if(data.code == '200'){
 callback(data);
 }else{
 
 if(AllAjax.closeError){
 AllAjax.closeError=true;
 }else{
 AllAjax.closeError=true;
 }
 alert('Wrong data! '+data.code);
 }
 },
 error:function (err) {
 if(AllAjax.closeError||AllAjax.closeError===undefined){
 alert('Network is error');
 }else{
 AllAjax.closeError=true; }}}); }; } // This method uses object encapsulation. AllAjax.commonAjax (URL,params,callback,flag); //url: the requested URL, in addition to being used as the name of the Ajax function for this URL request. //params: the parameter passed in when the interface is called. //callback: the function to be called after the request succeeds. //flag: additional parameters passed in to be used. Is passed to callback as an argument to callback. If necessary, you can take two arguments when defining the callback function. This parameter may not be passed.Copy the code

We recommend a free learning group, which summarizes mobile application website development, CSS, HTML, Webpack, Vue Node Angular and interview resources, etc. Students interested in web development technology, welcome to join Q group: 864305860, no matter you are small white or Daniel I welcome, and Daniel organized a set of efficient learning routes and tutorials to share with you free, while updating video materials every day. In the end, I wish you all success as soon as possible, get satisfactory offer, fast promotion and salary increase, and walk on the peak of life.