Question about the response sequence of multiple Ajax requests

 

Note: Mark the source in a prominent place for reprinting.

Sometimes, in a business event processing process, you may encounter a button or other events that trigger an action and need to execute more than two Ajax requests, however, you may have to worry about the order in which Ajax requests are executed. Sometimes there are problems with the order of Ajax requests, which may lead to various problems. For example, there are two Ajax events: ajax1, ajax2 a main method call execution Entry 1. function main () {ajax1 (data, callback); ajax2 (data, callback);} if we follow the above method, it seems that ajax1 is executed first, run the command after ajax2. If you don't think about it, some people will think that ajax1 will be executed after it is executed. Is it true that ajax2? The answer is not necessarily. Of course, when there are multiple Ajax requests that do not require the execution return sequence, we do not need to think too much about who will execute first, who should first return the Ajax event? How can we solve the Ajax event execution and return order? Of course, now you should think of the Ajax callback function, good, this is a good idea. Now let's change the method as follows: function main () {ajax1 (data, ajax2 ();} does it look like very is good? Really? Is it really very good? Maybe, but in some cases, this may be inconvenient to write, of course, you may not encounter, but I encountered a special situation, such as the following possible function main () {AA (data); ajax1 (data, callback);} function AA (VAL) {var DATA = Val + "; // modify, encapsulate, of course, here is ajax2 (data, ajax2callback);} function ajax2callback () {console. log ("===== callback function ajax2callback () Execution ========="); console. log ("==== the operations that must be performed after Ajax execution is completed ====== ");} do you think this situation can meet the requirement that ajax2 should be executed first in ajax1 and completed first? 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 that this is not simple. Put the ajax1 call into the end of the ajax2 method callback method ajax2callback and you 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 calling in is complicated. You should try to avoid modifying the previous underlying method. Maybe you have solved this bug simply, and you may create multiple bugs. is there any better solution? Sure and solve it is easy, but few people with insufficient work experience will think about it. They will only use the previous method to solve the problem, regardless of the sanqi 21. I have adopted a stupid method, and there are still some problems. I used the setTimeout timer to execute it once, but the problem must be known to everyone. Who knows how long it will take to execute Ajax, fortunately, I am guided by some great gods. Do you still remember to sort the arrays? You may be curious about the relationship between this and array sorting. The code below will explain everything: function main () {var temp = ajax2callback; ajax2callback = function () {temp (); ajax1 (data, callback );} AA (data); ajax2callback = temp;} function AA (VAL) {var DATA = Val + "; // modify, encapsulate, of course, here is ajax2 (data, ajax2callback);} function ajax2callback () {console. log ("===== callback function ajax2callback () Execution ========="); console. log ("===== the operations that must be performed after Ajax execution is completed here ========") ;}no, Is it interesting, I didn't modify the method of the lowest layer. I only modified the main method, isn't it like When we compare two values in array sorting, whether you use Bubble sorting or quick sorting, a temporary variable is set to store values. Of course, if the sorting is large, you do not need to set the temporary variables. You only need to use a ^ operator to assign values to the ratio. You can even be lazy to directly call the arrays of the system. the sort () method can all be ========================== below is part of the code in my company project, for reference only, it reminds me of how to implement ======================== 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 ;}