Last Updated: August 22, 2017
·
267
· mithu khan

Why used var busy, how it works on the code?

I am new in Javascript and Please pardon me for my weak English.
Project info: When users scrolls mouse and go buttom of the browser there show a message ‘Loading...please wait’ then function displayRecords() fired and fetch 15rows every mouse scrolling from database by $.ajax() method.
Please see in $(window).scroll(function() there used busy=true; If you do not use this, all databse data show at a time and and do not show any loding message. It is wrong for the project. I think, busy=true are used for stoping the repeatedly work of the scrollTop() method and also function displayRecords().
My quistion is How var busy works on the code ? I think it is just a boolean value but witout it full project do not work properly.
Thanks All.
<div id="loaderimage"> Loading...please wait</div>
<div id="loader
message"></div>
<div class="col-lg-12" id="results"></div>
<script type="text/javascript">
var busy = false; //1
var limit = 15
var offset = 0;
function displayRecords(lim, off) {
$.ajax({
type: "GET",
async: false,
url: "getrecords.php",
data: "limit=" + lim + "&offset=" + off,
cache: false,
beforeSend: function() {
$("#loadermessage").html("").hide();
$('#loader
image').show();
},
success: function(html) {
$("#results").append(html);
$('#loaderimage').hide();
if (html == "") {
$("#loader
message").html('<button class="btn btn-default" type="button">No more records.</button>').show()
} else {
$("#loader_message").html('<button class="btn btn-default" type="button">Loading please wait...</button>').show();
}
busy = false;//2
}
});
}
$(document).ready(function() {
// start to load the first set of data
displayRecords(limit, offset);
$(window).scroll(function() {
// make sure u give the container id of the data to be loaded in.
if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {//3
//My confustion here, how busy works on code;
busy = true;//4
offset = limit + offset;
displayRecords(limit, offset);
}
});
});
</script>