This document describes the Ajax queue implemented by jquery.
This requirement is generally the same duplicate request pointing to the same web site, such as verifying the email address and user name during registration. If you do not need a queue, A single client can send countless Ajax requests frequently. I used to use a thing called ajaxlock, release the variable only when the Ajax response is successful). This time, I learned about the queue. It is much more convenient to use it,
First, simulate a Server Page, test. php
<?PHPsleep(5);exit(time().'');?>
Next is the front-end page, which is triggered by an element:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">$(function(){$("body").queue([]);$("#dtitle").click(function(){$("body").queue(function(n){$.get("test.php?t="+new Date().getMilliseconds(),function(){n();});});});});Three sentences, one sentence explanation:
The first line binds a queue to any dom element. I select the body, and the queue Initialization is empty, and the default "FX" is used for the queue name"
The second row binds the click event of an element.
Row 3: Click the execution method. Each time a new element is added to the FX queue,Parameter n points to the next element in the queue., I chose to execute the n method after the Ajax request is complete, so that jquery's Automatic Execution of the queue is associated with the success of the Ajax request.
Of course, I wrote it quite concisely. If I have never used it, I will feel like Yun. Read the API carefully.
The following is the execution result of firebug. I click the dtitle element three times in a row and send a request every five seconds. Of course, this is only the principle of demonstration. Since three requests are sent, the last request must be taken as the standard. You can use the Length attribute of the queue to perform round robin, And the length is changed to 0 at the moment, after all the requests are completed, you can execute the logic you want.
Okay, send Buddha to the west and change the test. js file:
$(function(){$("body").queue([]);$("#dtitle").click(function(){$("body").queue(function(n){$.get("test.php?t="+new Date().getMilliseconds(),function(){n();if($("body").queue().length==0) alert("done");});});});That is, only N (); method is followed by a judgment. The above shows how to judge that the queue is empty.
People are always lazy. I am too lazy to name every queue. When there are many Ajax requests, such as a registry ticket, you need to verify the email address, nickname, and invitation code,
So can the default queue name "FX" be used for every element? So I changed test. js
$(function(){$("body").queue([]);$("#dtitle").queue([]);$("#dtitle").click(function(){$("body").queue(function(n){$.get("test.php?t="+new Date().getMilliseconds(),function(){n();console.log("A:"+$("body").queue().length+","+$("#dtitle").queue().length);});});$(this).queue(function(n){$.get("test.php?t="+new Date().getMilliseconds(),function(){n();console.log("B:"+$("body").queue().length+","+$("#dtitle").queue().length);});});});});I specified a queue for the body and dtitle elements respectively, and used the default queue name. I triggered four consecutive requests. The result is as follows:
We can see that the two queues are independent, so we need to verify the form elements, as long as each element is bound to its own queue.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
