JavaScript中ajax函数如何多次独立执行，互不干扰？

Question

我正在学习JavaScript
遇到了一个问题，百思不得其解
希望有朋友能指点迷津

需求是这样的
有几个div盒子，每个div内有一个按钮，点击按钮之后，就会AJAX获取内容，然后添加到对应的div盒子内。

问题是：
如果连续点击几个div盒子的按钮，速度过快。导致前面的AJAX还没有获取到，则会把点击获取的内容全部添加到最后一个点击的DIV盒子内，而不是对应点击按钮的盒子

代码如下：
html：

<div class="ajaxpager">
    <a class="ajax-next" ajax-href="xxxxx1.php">加载1</a>
</div>
<div class="ajaxpager">
    <a class="ajax-next" ajax-href="xxxxx2.php">加载2</a>
</div>
<div class="ajaxpager">
    <a class="ajax-next" ajax-href="xxxxx3.php">加载3</a>
</div>
<div class="ajaxpager">
    <a class="ajax-next" ajax-href="xxxxx4.php">加载4</a>
</div>

JS：

function get_ajax($this, con) {
    //准备传入参数
    href = $this.attr("ajax-href") || $this.attr("href");
    href && $.ajax({
        type: "GET",
        url: href,
        dataType: "html",
        success: function(a) {
            data = $(a).find(con);
            $($this.parents(con)[0]).append(data);
        }
    });
    return !1;
}

// 绑定点击动作
$('body').on('click', ".ajax-next", function() {
    return get_ajax($(this), '.ajaxpager'), !1;
})

望大神指点一二！

Answer 1

1.修改a元素href值，添加 data-href属性,保证a元素被点击时发生页面跳转

<a class="ajax-next" href="xxxxx1.php">加载1</a>

=>

<a class="ajax-next" href="javascript:void(0)" data-href=”xxxxx1.php“>加载1</a>

2.修改绑定事件函数 event.target表示触发点击动作的实际DOM元素,也可以为a元素添加唯一标识符，保证返回的内容能填充到正确位置

// 绑定点击动作
$('body').on('click', ".ajax-next", function(event) {
    return get_ajax($(this), event.target), !1;
});

function get_ajax($this, dispatchDOM) {
    //准备传入参数
    // href = $this.attr("ajax-href") || $this.attr("href");
    var href = $(dispatchDOM).attr('data-href');
    href&&$.ajax({
        type: "GET",
        url: href,
        dataType: "html",
        success: function(a) {
            data = $(a).find(con);
            $(dispatchDOM).append(data);
        }
    });
    return !1;
}