Как в цикле for переходить к следующей итерации после завершения предыдущей?
 

Есть такой скрипт у меня, который подгружает карточки. Подгружает такое число карточек которое указано на кнопке.
Затея в том чтобы он подгружал их по очереди, сначала полностью одну, затем вторую полностью и так далее.

Но как я вижу он тупо быстро проходит цикл и делает столько запросов на загрузку сколько итераций указано в цикле.

Как бы сделать так чтобы следующая загрузка начиналась только после того как закончится предыдущая?

$('.getbutton').click(function() {
				ob=$(this);
				$(ob).css("background-color","#ccc"); 
				quantity=$(this).attr("title");
				for (var i = 0; i <= quantity; i++) { 
					$.post("scripts/getcontent.php", {quantity:1}, function(data) {
					$("#main").append(data);
					});
				}
				  $(ob).stop().animate({ backgroundColor: "#2979ec"}, 2400);
		});

Как то не понятно как это будет выглядеть в коде. Есть ещё варианты?

Есть)
Напишите функцию которая будет выполнять запрос, вне её должен быть счетчик. Счетчик увеличивать с каждым ответом. Если счетчик меньше чем нужно в ответе функция вызывает саму себя (называется рекурсия).

Получается что следующий запрос будет после ответа.

Проблему решил.

Для тех кто столкнётся с такой же проблемой вот моё решение.

$('.getbutton').click(function() {
				b=$(this);
				$(b).css("background-color","#ccc"); 
				quantity=$(this).attr("title");
				function ajaxwithi(i){
					$.ajax({
						url: 'scripts/getcontent.php',
						type: 'POST',
						data: 'quantity=1',
						success: function(data) {
							$("#main").append(data);
							if (i < quantity) {ajaxwithi(i + 1);}
						}
					});
				}
				ajaxwithi(1);
				$(b).stop().animate({ backgroundColor: "#2979ec"}, 2400);
		});