A simple way to queue up from AJAX requests
Formulation of the problem
Asynchronous requests are a convenient way to unload users of the site from an excess of information that is “dumped” on them after the page is displayed. Consider a classic example - a list of products in the online store. The user executes any search query, as a result of which a compact list of found products is displayed. For example, it can be only one name . Under each of the names there is a link “more details”, after clicking on which an additional block will open under the name, already with detailed information about the product. The user friendliness is obvious - having quickly looked through the entire list, he “clicks” only the goods that interest him, and will quickly go to the next pages. It is also beneficial from the server side - less load, less outgoing traffic.
However, the following point inevitably arises in such a system: a user can quickly click on several “more” links in a row, while the server will process incoming requests for a long time. If only one XMLHttpRequest object is used in AJAX (usually it is), then all requests will fall into it “in a heap”, and the result of the request will be displayed not where it is needed. Thus, there is a task to organize a queue of similar asynchronous requests to the server, so that the next one is executed only after the previous one is completed .
')
Solution
The first and most obvious way is to disable asynchrony in the browser itself - set the last parameter to false:
request.open (“GET”, url, false );
Unfortunately, although it is true, it only works in the part of browsers, and, for example, the last firefox 3.5 just does not execute such a request.
The second option is to create an array of XMLHttpRequest objects, and execute each request to the server through its own object. Suboptimal and inconvenient.
Therefore, we make javascript standard queue (array). The general algorithm looks like this:
- initialize an empty array
- in an asynchronous request, we check if any other request is already being executed. If executed, put the request parameter in the queue and do nothing (do not execute the request to the server)
- when the page is updated, we look at the size of our queue. If it is not empty, we again initialize the request (as if on behalf of the user)
- repeat the cycle until the queue is empty
Thus, adding and removing elements from the array, as well as waiting until the result of the request comes from the server, you can easily implement a queue of asynchronous requests.
A working example of scripts can be viewed, for example, here:
http://moiknigi.com/user_598/books/
The scripts successfully work in any variants:
- discovery of one description of the goods
- quick “clicking” of several products with further waiting
- a mixed version: "clicking" on some products at the time when others open
- the opening of all the goods in one click (in this case, a queue of 20 items is formed immediately, which is then gradually cleared)
findings
I suppose such a simple approach can be used on many sites that display different lists of the same type (goods, news, etc.). The scripts themselves are easy to understand and occupy an extremely small volume.
Asynchronous requests are a convenient way to unload users of the site from an excess of information that is “dumped” on them after the page is displayed. Consider a classic example - a list of products in the online store. The user executes any search query, as a result of which a compact list of found products is displayed. For example, it can be only one name . Under each of the names there is a link “more details”, after clicking on which an additional block will open under the name, already with detailed information about the product. The user friendliness is obvious - having quickly looked through the entire list, he “clicks” only the goods that interest him, and will quickly go to the next pages. It is also beneficial from the server side - less load, less outgoing traffic.
However, the following point inevitably arises in such a system: a user can quickly click on several “more” links in a row, while the server will process incoming requests for a long time. If only one XMLHttpRequest object is used in AJAX (usually it is), then all requests will fall into it “in a heap”, and the result of the request will be displayed not where it is needed. Thus, there is a task to organize a queue of similar asynchronous requests to the server, so that the next one is executed only after the previous one is completed .
')
Solution
The first and most obvious way is to disable asynchrony in the browser itself - set the last parameter to false:
request.open (“GET”, url, false );
Unfortunately, although it is true, it only works in the part of browsers, and, for example, the last firefox 3.5 just does not execute such a request.
The second option is to create an array of XMLHttpRequest objects, and execute each request to the server through its own object. Suboptimal and inconvenient.
Therefore, we make javascript standard queue (array). The general algorithm looks like this:
- initialize an empty array
- in an asynchronous request, we check if any other request is already being executed. If executed, put the request parameter in the queue and do nothing (do not execute the request to the server)
- when the page is updated, we look at the size of our queue. If it is not empty, we again initialize the request (as if on behalf of the user)
- repeat the cycle until the queue is empty
Thus, adding and removing elements from the array, as well as waiting until the result of the request comes from the server, you can easily implement a queue of asynchronous requests.
A working example of scripts can be viewed, for example, here:
http://moiknigi.com/user_598/books/
The scripts successfully work in any variants:
- discovery of one description of the goods
- quick “clicking” of several products with further waiting
- a mixed version: "clicking" on some products at the time when others open
- the opening of all the goods in one click (in this case, a queue of 20 items is formed immediately, which is then gradually cleared)
findings
I suppose such a simple approach can be used on many sites that display different lists of the same type (goods, news, etc.). The scripts themselves are easy to understand and occupy an extremely small volume.
Source: https://habr.com/ru/post/67622/
All Articles