An example discussion on the issue of execution and return sequence of multiple Ajax requests

This article mainly discusses with you the issues about the order of execution and return of multiple Ajax requests. Friends who are interested in ajax can refer to the following article about multiple Ajax Request execution return sequence example discussion article

Sometimes in a business Event processing process, you may encounter a button being clicked or other events triggering an action

You need to execute more than two Ajax requests, but you may have to worry about the order in which the Ajax requests are executed. Sometimes there is a problem with the order of Ajax requests, which will lead to various problems.

For example, there are two ajax events, respectively ajax1, ajax2

A method called main calls the execution entry

1.

##

function main(){
ajax1(data,callback);
ajax2(data,callback);
}

If we follow the above method to execute, on the surface it seems that ajax1 is executed first and ajax2 is executed later. If you don't think about it carefully, some people will think that ajax1 is executed first, and then ajax2 is executed. Is this really the case?

The answer is not necessarily. Of course, for situations where there are multiple ajax requests that do not require the order of execution and return, we do not need to think too much about who executes first and who returns first.
What if we consider the order of execution and return of ajax events?

If this is the case, how to solve the execution return order of ajax events?

Of course now you should think of ajax
callback function, Good, this is a good ideaNow press this Change your thinking and approach as follows

function main(){
ajax1( data , ajax2( ) );
}

Looking like this, don’t you think it’s Very Good? Really? Is it really Very Good?

Maybe, But in some cases, it may be inconvenient to write like this. Of course, you may not encounter it, but I encountered a rather special situation.
For example, the following possibility

function main(){
aa(data);
ajax1(data,callback);
}

function aa(val){
var data=val+"";//这里是对传入数据进行修改，封装，当然这里是随便写的
ajax2(data，ajax2Callback);
}

function ajax2Callback(){
console.log("=====回调函数ajax2Callback（）执行========");
console.log("=====这里正在执行ajax执行完毕后必须执行的操作========");
}

Do you think this situation can satisfy ajax2 to be executed first and completed before ajax1

Think carefully and you will find the answer

No!
Now, How to solve this proplem. How to make sure ajax2 finished before ajax1.

Of course, you may say, this is not simple, put the ajax1 call at the end of the ajax2 method callback method ajax2Callback Face

I have to admit that this is a solution, but if it is a very old project, it has been a project for several years. The calls inside are complicated, so you should try to avoid modifying the previous underlying methods. Maybe you just solve it simply in order to fix this bug, and you may create multiple bugs.

So is there any good way? Go and solve it?

Sure, solve it easy. But people with insufficient work experience rarely think of it all at once, and will only use the previous methods to solve the problem hastily, no matter what.

And I adopted a relatively stupid method, and there are still some problems. I used setTimeOut
Timer to execute it once, but everyone must know the problem. Who knows that this Ajax will be executed? How long has it been? Fortunately, a master has guided me. Do you still remember to sort the
array? Speaking of this, you may be curious about what this has to do with array sorting. The answer will be told belowThe code explains everything:

function main(){
var temp=ajax2Callback;
ajax2Callback=function(){
temp();
ajax1(data,callback);
}
aa(data);
ajax2Callback=temp; 
}

function aa(val){
var data=val+"";//这里是对传入数据进行修改，封装，当然这里是随便写的
ajax2(data，ajax2Callback);
}

function ajax2Callback(){
console.log("=====回调函数ajax2Callback（）执行========");
console.log("=====这里正在执行ajax执行完毕后必须执行的操作========");
}

Can you see it? Isn’t it very Interestingly, the lowest level method has not been modified, only the main method has been modified. Isn't it very similar to array sorting? When we compare the size of two values, whether you use

bubble sort

or quick sort, yes Not all set a temporary variable to store the value. Of course, when sorting and comparing sizes, you don’t need to set temporary variables, just use a ^operator to assign the size, or you can even be lazy enough to directly call the system’s Arrays.sort() method. Of course, this All can

function changeSearchContactType(obj)
{
if (!obj)
{
return;
}

var contactType = obj.value;

var origRenderTemplate = renderTemplate;
renderTemplate = function(data)
{
origRenderTemplate(data);
ajaxAnywhere.submitAJAX('setSearchContactType');
}
var result = TemplateHelper.changeSearchContactTemplate(contactType, contactUIUID);
renderTemplate = origRenderTemplate;
return result;
}

The above is all the content of this article, I hope it will be helpful to everyone! !

Related recommendations:

AJax implements functions similar to Baidu search bar

In-depth understanding of the ajax series No. 1 Chapter XHR Object

JSON data storage format for Ajax interaction with users

The above is the detailed content of An example discussion on the issue of execution and return sequence of multiple Ajax requests. For more information, please follow other related articles on the PHP Chinese website!