jQuery - нажатие кнопки запускает ajax вызовы, но позволяет им завершать sh один за другим в том порядке, в котором они были запущены

Question

У меня есть кнопка, которая при нажатии вызывает запрос ajax. Предположим, я щелкаю по нему n раз и n ajax вызовы запускаются, но я хочу, чтобы они заканчивались sh в том порядке, в котором они были запущены.

Html:

<button  id="btn" value="Click Me">Click Me</button>
<div id="items">
</div>

JS:

$("#btn").click(function(){
    $.ajax({
       method:"POST",
      url:"action.php",
      success:function(response){
       $("#items").after('<div class="demo">Demo Item</div>');
      }
    });
});

Объяснение:

Я вставил элемент, т.е. div с классом demo до items в случае успеха перезвонить. Но вызов ajax может занять некоторое время до завершения sh. Поэтому я думаю вставить элемент перед началом вызова ajax, чтобы пользователь увидел, что данные вставляются мгновенно.

Таким образом, если пользователь нажимает кнопку 3 раза, 3 div s будут вставлены мгновенно, но вызовы ajax могут еще не завершиться sh. И я хочу завершить sh звонки в порядке их создания.

Q1) Как этого добиться?

Q2) Это хорошая идея ? Пользователь может покинуть страницу даже до завершения вызовов ajax. Как справиться с этой критической ситуацией?