CODEWITHSUNDEEP
javascriptjquery
charlie
charlie

Reputation: 481

JQuery window scroll

I have the following JQuery code that runs a function when the page is scrolled near the bottom

var start = 2;
var limit = 2;
$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
    console.log(start);
    //f($(window).scrollTop() == $(document).height() - $(window).height()) {
        get_ticket_updates(start, limit);

        start = (start + 2);
    }
});

i added in the console log for the start variable which is adding 2 each time, however when scrolled to the bottom of the page its constantly adding 2 and running the function and not stopping.

How can it be stopped from running when it has already been run until the page is scrolled again?

UPDATE - added function:

function get_ticket_updates(start, limit) {
    $("#ticket_updates_loading").show();

    var seq = '<?php echo $_GET["seq"]; ?>';
    $.ajax({
        type: "GET",
        url: "/section/tickets/view-ticket?action=get_updates&seq=" + seq + "&start=" + start + "&limit=" + limit,
        cache: false,
        success: function(data) {
            $("#ticket_updates_loading").hide();
            $("#ticket_updates_area").append(data);
        }
    });
}

Upvotes: 1

Views: 98

Answers (1)

Tyler Fowle
Tyler Fowle

Reputation: 569

try adding a flag that gets reset when outside the specific scroll height, so you know if you should run the function or not

var start = 2;
var limit = 2;
var hasRan = false;
$(window).scroll(function() {
  console.log(hasRan +"  :  "+ start);

  if($(window).scrollTop() + $(window).height() < $(document).height() - 100) { 
    // reset flag when no longer at bottom of page
    hasRan = false;
  } else {
    if (hasRan == false) {
      get_ticket_updates(start, limit);
      start = (start + 2);
      // function has ran, trigger flag
      hasRan = true;
    }
  }
});
.box {
  height: 400vh;
}
<div class='box'></div>

Upvotes: 1

Related Questions