在分页上处理多个 Ajax 请求

Question

检索数据：

<div class="manifestations">
  @include('data.php')
</div>

这是我的代码：

<script>
    $(window).on('hashchange', function() {
        if (window.location.hash) {
            var page = window.location.hash.replace('#', '');
            if (page == Number.NaN || page <= 0) {
                return false;
            } else {
                getManifestations(page);
            }
        }
    });


    $(document).ajaxStop(function () {
        $('#spinCard').hide();
    });

    $(document).ajaxStart(function () {
        $('#spinCard').show();
    });

    app.ready(function(){
        $(document).on('click', '.pagination a', function (e) {
            getManifestations($(this).attr('href').split('page=')[1]);
            e.preventDefault();
        });
    });
    function getManifestations(page) {
        $.ajax({
            url : '?page=' + page,
            dataType: 'json',
        }).done(function (data) {
            $('.manifestations').html(data);
            location.hash = page;
        }).fail(function () {
           alert('Manifestations could not be loaded.');
        });
    }
</script>

如果用户在下一个 ajax 上连续单击多次，则会在页码之间不断跳转，例如 #5 #6 #5 #6 #5 ... 有没有办法防止这种情况发生？

ps 删除这个：

$(window).on('hashchange', function() {
        if (window.location.hash) {
            var page = window.location.hash.replace('#', '');
            if (page == Number.NaN || page <= 0) {
                return false;
            } else {
                getManifestations(page);
            }
        }
    });

防止发送多个请求是否有任何解决方案可以修改上述代码并使其一次发送一个请求

Answer 1

防止这种情况的一种方法是在第一次调用完成之前不允许再进行一次 ajax 调用

 function getManifestations(page) {
    if(! $('#spinCard').hasClass('data-loading')) {
        $('#spinCard').addClass('data-loading')
       $.ajax({
            url : '?page=' + page,
            dataType: 'json',
        }).done(function (data) {
            $('.manifestations').html(data);
            location.hash = page;
        }).fail(function () {
           alert('Manifestations could not be loaded.');
        }).always(function () {
            $('#spinCard').removeClass('data-loading')
        });
      }
    }