Poniżej moja ogólna koncepcja rozwiązania problemu. Pokomentowałem tu i ówdzie, także chyba da radę zrozumieć co się dzieje. Enjoy ;)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script>
var Kolejka = function(opcje) {
// ustawienie opcji
opcje = opcje || {};
opcje.url = opcje.url || "";
opcje.odpowiedz = opcje.odpowiedz || function() { };
// lista zakolejkowanych elementów
var lista = [];
var aktywny = false;
function dodaj(co) {
lista.push(co);
// odpal wysyłanie zapytań do serwera tylko jeden raz, w momencie dodania pierwszego elementu do listy
if (lista.length == 1 && !aktywny) {
aktywny = true;
dzialaj(0);
}
};
function dzialaj(numer) {
// nie ma nic w kolejce, przerwij i resetuj
if (numer >= lista.length) {
aktywny = false;
lista = [];
return;
}
// pobierz ostatni dodany element
// zostanie on przekazany do serwera
var dana = lista[numer];
// AJAX MAGIC!
// przetwarzaj.php robi coś z przekazanym elementem i zwraca odpowiedź)
$.get(opcje.url + dana, function(odpowiedz) {
// odpowiedź z serwera umieść w polu tekstowym
opcje.odpowiedz(odpowiedz);
// i jeszcze raz to samo, w koło macieju
dzialaj(numer + 1);
});
};
this.dodaj = dodaj;
};
$(window).ready(function() {
var kulejka = new Kolejka({
url: "przetwarzaj.php?dana=",
odpowiedz: function(odpowiedz) {
$("#tbOdpowiedzi").val( $("#tbOdpowiedzi").val() + "\r\n" + odpowiedz );
}
});
$("article a.eg").click(function(evt) {
// dodaj do kolejki zawartość html klikniętego linka
kulejka.dodaj($(this).html());
evt.preventDefault();
});
});
</script>
<style>
body { width: 600px; margin: 0 auto; font-family: Arial sans-serif; }
ul { list-style-type: none; }
ul li { display: inline; }
#tbOdpowiedzi { width: 400px; height: 220px; }
</style>
</head>
<body>
<article>
<ul>
<li><a href="#" class="eg">abra</a></li>
<li><a href="#" class="eg">kadabra</a></li>
<li><a href="#" class="eg">hokus</a></li>
<li><a href="#" class="eg">pokus</a></li>
<li><a href="#" class="eg">czary</a></li>
<li><a href="#" class="eg">mary</a></li>
</li>
<textarea id="tbOdpowiedzi"></textarea>
</article>
</body>
</html>