Javascript 防止多个Ajax请求（使用pushstate分页）

我在使用HTML API Pushstate进行ajax分页时遇到了一个问题

这是我的代码：

<ul class="small">
    <li>
        <p>a</p>
    </li>
</ul>

<ul class="paging">
    <li><a href=/page2>2</a></li>
    <li><a href=/page3>3</a><li>
    <li><a href=/page4>4</a><li>
</ul>


$(document).ready(function() {
    if (window.history && history.pushState) {
        historyedited = false;
        $(window).on('popstate', function(e) {
            if (historyedited) {
                loadProducts(location.pathname + location.search);
            }
        });
        doPager();
    }
});

function doPager() {
    $('.paging li a').click(function(e) {
        e.preventDefault();
        loadProducts($(this).attr('href'));
        history.pushState(null, null, $(this).attr('href'));
        historyedited = true;
    });
}

function loadProducts(url) {
    $('.small li').empty().load(url + ' .small', function() {
        doPager();
    });
}

a








$（文档）.ready（函数（）{
if（window.history&&history.pushState）{
历史编辑=假；
$（窗口）.on（'popstate'，函数（e）{
如果（历史编辑）{
loadProducts（location.pathname+location.search）；
}
});
doPager（）；
}
});
函数doPager（）{
$（'.a'）。单击（函数（e）{
e、 预防默认值（）；
loadProducts（$（this.attr（'href'））；
history.pushState（null，null，$（this.attr（'href'））；
历史编辑=真；
});
}
函数加载产品（url）{
$（'.small li'）.empty（）.load（url+'.small'，function（））{
doPager（）；
});
}

---

它在第一次单击时工作良好，但当我单击2次、3次或4次时，问题就出现了。它发出多个Ajax请求，事情变得越来越糟。我的代码有什么问题？

单击新页面时，必须先取消上一个请求。您不能使用.load（）进行此操作，因此最好使用$.ajax。你可以这样做：

$(document).ready(function() {
    $('.paging li a').click(function(e) {
        e.preventDefault();

        // Cancel previous request if there is one
        if(typeof xhr !== 'undefined') {
            xhr.abort();
        }

        // Do the new request
        var xhr = $.ajax({
            url: $(this).attr('href') + '.small',
            success: function(data) {
                 $('.small li').html(data);
                 doPager();
            }
        });
    });
});

---

试试下面的方法

$(document).ready(function() {
if (window.history && history.pushState) {
    historyedited = false;$(window).on('popstate', function(e) {
        if (historyedited) {
            loadProducts(location.pathname + location.search);
        }
    });
}
$('.paging li a').click(function(e) {
    e.preventDefault();
    loadProducts($(this).attr('href'));
    history.pushState(null, null, $(this).attr('href'));
    historyedited = true;
});});


function loadProducts(url){
$('.small li').empty().load(url + ' .small');}

---

当您的点击点正在进行ajax调用时，您进行多个ajax调用不是很正常吗