Question

我有一个脚本，一旦用户到达页面底部，该脚本就会发出ajax GET请求。

$(function(){ 
   window.addEventListener('scroll', fetchImages);
   window.addEventListener('scroll', fetchNotifications);
});

function fetchImages() {

    var imagePage = $('.endless-pagination').data('next-page');

    if(imagePage !== null) {

        var last = $('.endless-pagination').data('last-item');

        var within = $('.endless-pagination').data('within');

        var orderBy = $('.endless-pagination').data('order-by');

        clearTimeout( $.data( this, "scrollCheckImages" ) );

        $.data( this, "scrollCheckImages", setTimeout(function() {

            var scroll_position_for_images_load = $(window).height() + $(window).scrollTop() + 900;

            if(scroll_position_for_images_load >= $(document).height()) {
                $(".dual-ring-container").show();
                $.ajax({
                    url: imagePage,
                    method: 'get',
                    cache: false,
                })
                .done(function( data ) {
                    if (last != null) {
                        $(".dual-ring-container").hide();
                        var newPageUrl =  data.next_page + "&within=" + within + "&orderBy=" + orderBy + "&last=" + last;
                        $('.endless-pagination').append(data.images);
                        $('.endless-pagination').data('next-page', newPageUrl);
                        setResizeVariables();
                        updateReadMore();
                        initMentions();
                    }
                });
            }
        }, 350))
    }
}

但是，有一个问题。由于该函数是由“滚动”事件侦听器触发的，因此此get请求实际上是垃圾邮件。

我如何做到这一点，使其只能每隔几秒钟调用一次？

Answer 1

使用一个变量来跟踪函数主体最后一次运行的时间，如果它在不到几秒钟前运行，则提早返回：

let lastCall = 0;
function fetchImages() {
  const now = Date.now();
  if (now - lastCall < 3000) return;
  lastCall = now;
  // ...

请注意，您可以使用类似的策略来减少不必要的缩进。而不是

  if (imagePage !== null) {
    // big block of code
  }
} // end of fetchImages

您可以使用

if (imagePage === null) return;

具有完全相同的效果，但会使您的代码更具可读性。

在ajax获取请求之间添加延迟

1 个答案: