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设置为position：relative和negative z-index），然后在返回数据时启用它们。或者，您可以使用按钮并添加/删除已禁用的属性。

将Ajax结果附加到各个元素

2 个答案: