Добавьте задержку между запросами ajax get

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;

, который будет иметь точно такой же эффект, но сделает ваш код немного более читабельным.