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')
        });
      }
    }

处理分页时的多个Ajax请求

1 个答案: