scroll event is being triggered multiple times

Question

I am calling a function when the scroll is 800px away from the bottom. It calls that function multiple times but I want to call that function only once and then load some data and again when I go to 800px form bottom then again it should call that function only once. That function name is load_data() .

$(window).scroll(function(event) {
  if($(window).scrollTop() + $(window).height() > $(document).height() - 
    800 ) {
    // ajax call get data from server and append to the div
    var id = $('#load_more_button').data('id');
    $('#load_more_button').html('<b>Loading...</b>');
    if (id >= 1) {
     load_data(id, _token); 
    }       
  }
});

Answer 1

It could be that the scroll event is getting triggered multiple times right in a row. So your function is getting called when window.scrollTop() is 800 from the bottom, then 799 from the bottom, 798 from the bottom before the code in your if is actually triggered.

Try re-setting window.scrollTop(value) so that it can never get past 800 from the bottom instead. That way your function is only called once.

Answer 2

You are using a 'if' condition which will run whenever the $(window).scrollTop() + $(window).height() > $(document).height() - 800 This means that whenever the value of

    $(window).scrollTop() + $(window).height()

falls above the value of

    $(document).height() - 800 

the function will always get called. Try using '===' instead of '>' so that the loop will be triggered only once for a specific value.

You can also try and use a control. Lets say; introduce

    var hasRun = 0; //increment this value once the condition
    // $(window).scrollTop() + $(window).height() > $(document).height() - 800 
    //is true. 

decrement the value of var hasRun whenever

    $(window).scrollTop() + $(window).height() < $(document).height() - 800 

is true. Please try this.

     $(window).scroll(function(event) {
var hasRun = 0;
if($(window).scrollTop() + $(window).height() > $(document).height() - 
800 ) {
hasRun = hasRun + 1;
}
 if($(window).scrollTop() + $(window).height() < $(document).height() - 
800 ) {
hasRun = 0;
}
if(hasRun <= 0){
// ajax call get data from server and append to the div
var id = $('#load_more_button').data('id');
$('#load_more_button').html('<b>Loading...</b>');
if (id >= 1) {
load_data(id, _token);  
}       
}
});

Answer 3

I hope this is how you want.

function load_data(id = "", _token) {
    $.ajax({
        url: "load_data",
        method: "POST",
        data: {
            id: id,
            _token: _token
        },
        success: function (data) {
            $('#load_more').remove();
            $('.post_data').append(data);
            scrollFlag = false;
        }
    });
}
console.log(id);
var flag = false;
var scrollFlag = false;

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    var height = $(document).height() - 400;
    if (!scrollFlag) {
        scrollFlag = true;
        if ((scroll > height || !flag)) {
            // ajax call get data from server and append to the div
            var id = $('#load_more_button').data('id');
            $('#load_more_button').html('<b>Loading...</b>');
            if (id >= 1) {
                load_data(id, _token);
            }
            flag = true;
        }
    }
});

https://jsfiddle.net/qu1eon2d/