результатов Ajax к Добавлению данных соответствующих элементам

Question

у меня есть некоторые элементы, которые создают некоторые элементы и добавить его результаты к соответствующему DIV

<a onclick="popUp('1')">user 1</a> 
<a onclick="popUp('2')">user 2</a> 
<a onclick="popUp('3')">user 3</a> 

function popUp(id){ 
    $el = $('<div>').attr({ 
     id:id, 
     'class' : 'popDiv' 
    }) 
    if($('body').append($el)){ 
     $.ajax({ 
      url:'/link.php?user='+id, 
      success : function(data) { 
       $el.html(data); 
      } 
     }) 
    } 
} 

Но вопрос заключается в том, что если я нажимаю пользователь 1 и данные успехов не вернулось прежде чем нажать пользователь 2. Если возвращение данных пользователя 1, он будет добавлен к созданному элементу пользователя 2 вместо пользователя 1.

есть ли способ я могу исправить это

Answer 1

Я сделал быструю версию без AJAX:

var fns = [], 
calls = 0; 

function popUp(id) { 
    var $el = $('<div>').attr({ 
     id: id, 
     'class': 'popDiv' 
    }); 


    if ($('body').append($el)) { 
     var i = fns.push({ 
      fn: function(data) { 
       $el.html(data); 
      } 
     }) - 1; 
     calls++; 
     ajax({ 
      url: '/link.php?user=' + id, 
      success: function(data) { 
       fns[i].data = data; 
       calls--; 
       if (!calls) { 
        fns.forEach(function(it) { 
         console.log(it); 
         it.fn(it.data); 
        }) 
        fns = []; 
       } 
      } 
     }) 
    } 
} 

function ajax(data) { 
    setTimeout(function() { 
     data.success("Response " + data.url); 
    }, parseInt(Math.random(0, 1) * 4) * 1000 + 1000); 
} 

https://jsfiddle.net/Mephiztopheles/yaxfcq46/

Answer 2

Вы можете попробовать отключить ссылки на клик (например, установив их css в posi : относительный и отрицательный z-индекс), а затем включить их, когда данные возвращаются. В качестве альтернативы вы можете использовать кнопки и добавлять/удалять отключенные атрибуты.