jQuery ajax infinite scroll duplicate ajax call

Question

I am calling ajax call but when I am scrolling 2 times its calling duplicate ajax calls.. For two scrolls I am getting duplicate ajax call.can anyone help me how to rectify duplicate ajax call.

jQuery(function($){       
    $('#infscr-loading').hide();
    $(window).scroll(function() { //detect page scroll
        if($(window).scrollTop() == $(document).height() - $(window).height()) {
            var key = $(".tab-content div.active").attr("id"); 
            var offset = $(".tab-content div.active .movie_boot .movie-beta__item").length;
            var data1 = $("#yr").val();             
            url = "/loop-movies/?offset="+offset+'&key='+key+'&yr='+data1;
            $.ajax({
                type       : "post",
                url        : url,
                delay      : 500, 
                beforeSend : function(){
                    $('#infscr-loading').show();
                },
                success    : function(response) {   
                    $(".tab-content div.active .movie_boot").append(response);
                    $('#infscr-loading').hide();
                }
            });         
        }
    });
});

you have written ajax call on scroll of window so it will call as many times as you scroll — Dipali Vasani
– Dipali Vasani, Commented Mar 16, 2016 at 13:21
I suggest using infinite or endless plugins which are easy to use — vsync
– vsync, Commented May 17, 2017 at 13:19

Rino Raj · Accepted Answer · 2017-05-17 16:34:25Z

1

var flag;
if (flag.readyState == 4 && flag.status == 200) {
  flag = $.ajax({
    type: "post",
    url: url,
    delay: 500,
    beforeSend: function() {
      $('#infscr-loading').show();
    },
    success: function(response) {
      $(".tab-content div.active .movie_boot").append(response);
      $('#infscr-loading').hide();
    }
  });
}
else{
   alert("AJAX is going on")
}

Demo Fiddle to show the working

Reference

edited May 17, 2017 at 16:34

answered Mar 16, 2016 at 13:24

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rino Raj Over a year ago

@GabrielBenamy ... ha ha... Always glad to hear that :)

Jose Greinch · Accepted Answer · 2020-12-25 10:15:36Z

0

For achieving that behaviour you don't need to rely on the onScroll event all that just with Vanilla Javascript and the IntersectionObserver API.

All you need to do is place elements and listen for when they become available in the screen and have a global variable (in your scenario) that is switched to hasMoreItems = true or hasMoreItems = false when it reached the end or it's loading

You can accomplish that with a few javascript & html lines and it's much more performant than listening for scroll events in the browsers

I recently put together an article about infinite scrolling and this specific behaviour here

answered Dec 25, 2020 at 10:15

Jose Greinch

4783 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery ajax infinite scroll duplicate ajax call

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related