文如其名，介紹jQuery實現的ajax隊列。
有這個需求一般是同指向同一網址的同一個重複請求，比如註冊的時候驗證郵箱、使用者名稱等，不用隊列的話，單個用戶端就可以頻繁發出無數的ajax請求出去，我以前居然一直是用的一個我自己叫做ajaxlock的東西，（其實就是設一個變數，到ajax響應成功才把這個變數釋放），這次瞭解了一下隊列，用它的話方便多了，
首先，類比一個伺服器頁面，test.php
<?PHPsleep(5);exit(time().'');?>
然後是前台頁面，假設由一個元素觸發：
<!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"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>測試ajax隊列</title></head><body><div id="dtitle">點此觸發</div></body><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" src="test.js"></script></html>
$(function(){$("body").queue([]);$("#dtitle").click(function(){$("body").queue(function(n){$.get("test.php?t="+new Date().getMilliseconds(),function(){n();});});});});
才三句話，逐句解釋：
第一行，把一個隊資料行繫結到任何一個dom元素上面去，我選擇了body，而且隊列初始化為空白，並且隊列名用了預設的"fx"
第二行，繫結元素的click事件
第三行，click執行的方法，，每次把fx隊列添加一個新元素進去，參數n指向了隊列中的下一個元素，我選擇在了ajax請求完成後才執行這個n方法，這樣就把jquery對於隊列的自動執行和ajax請求成功給關聯了起來。
當然，我寫得相當簡練了，沒用過的反而會感到不知所云，仔細閱讀一下API吧
下面是firebug下的執行結果，我連續對dtitle元素點擊三次，如願每5秒才發送一次請求。當然這隻是示範的原理，既然發了三次請求，肯定要以最後一次為準，那麼可以通過隊列的length屬性來輪循，一時length變為0了，就是全部請求結束了，你就可以執行你想要的邏輯了
好吧，送佛到西，把test.js檔案改成：
$(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");});});});
也就是只在n();方法後加了一個判斷，上面是示範怎麼判斷隊列為空白的
人總是懶的，我懶於為每一個隊列起名字，當需要ajax請求的東西很多的時候，比如一個註冊表單，你要驗證郵箱，暱稱，邀請碼等，
那麼這麼預設的隊列名"fx"能用給每一個元素嗎？於是我把上面的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);});});});});
我給body和dtitle元素分別指定了一個隊列，並且都用了預設的隊列名，我連續觸發了4次請求，看結果：
可見兩個隊列是獨立的，這樣我們要驗證表單元素，只要每個元素繫結自己的隊列就可以了。
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
