why global variable is not changed?

Question

Global variables do not change their values. Specifically pageNumber remains 1 and it is supposed to be incremented in a function. I try to implement continious scroll and get next block of code, using post query to action in my asp.net mvc controller, but it of course it always gets me the same result

<script type="text/javascript">
 pageNumber = 1; //Infinite Scroll starts from second block
 noMoreData = false;
 inProgress = false;

 function ScrollFunction(pageNumber, noMoreData, inProgress) {
  var documentHeight = $(document).height();
  var windowHeight = $(window).height();
  var windowScrollTop = $(window).scrollTop();

  var documentMinusWindowHeight = documentHeight - windowHeight;
  //-1 because when scroll reaches the bottom of the document windowScrollTop - documentHeightMinusWindowHeight equals from zero to 1
  if ((windowScrollTop > documentMinusWindowHeight - 1) && !noMoreData && !inProgress) {
   inProgress = true;
   $("#loadingDiv").show();

   $.post("@Url.Action("InfiniteScroll", "Products")", { "productId": '@Model.ProductViewModel.Id', "pageNumber": pageNumber },
  function (data) {
   pageNumber++;
   noMoreData = data.NoMoreData;
   $("#ProductDealsPartialDiv").append(data.HtmlString);
   $("#loadingDiv").hide();
   inProgress = false;
  });
 }
 }

 $(document).ready(function () {
  //var pageNumber = 1; 
  //var noMoreData = false;
  //var inProgress = false;
  ScrollFunction(pageNumber, noMoreData, inProgress);
  $(window).scroll(function () {
   ScrollFunction(pageNumber, noMoreData, inProgress);
  });

 });
</script>

But this code snippet works absolutely correct.

<script type="text/javascript">
 $(document).ready(function () {
  var pageNumber = 1; //Infinite Scroll starts from second block
  var noMoreData = false;
  var inProgress = false;

  $(window).scroll(function () {
   var documentHeight = $(document).height();
   var windowHeight = $(window).height();
   var windowScrollTop = $(window).scrollTop();

   var documentMinusWindowHeight = documentHeight - windowHeight;
   //-1 because when scroll reaches the bottom of the document windowScrollTop - documentHeightMinusWindowHeight equals from zero to 1
   if ((windowScrollTop > documentMinusWindowHeight - 1) && !noMoreData && !inProgress) {
    inProgress = true;
    $("#loadingDiv").show();

    $.post("@Url.Action("InfiniteScroll", "Products")", { "productId": '@Model.ProductViewModel.Id', "pageNumber": pageNumber },
     function (data) {
      pageNumber++;
      noMoreData = data.NoMoreData;
      $("#ProductDealsPartialDiv").append(data.HtmlString);
      $("#loadingDiv").hide();
      inProgress = false;
     });
   }
  });
 });

</script>

Please explain why does this happen. Thanks.

can you provide a [mcve]? – Daniel A. White Jan 28 '16 at 11:20 — Daniel A. White, Jan 28 '16 at 11:20

score 1 · Accepted Answer · answered Jan 28 '16 at 11:25

That's because the first parameter of your function ScrollFunction is called pageNumber.

So when you call it, the function manipulate its local variable called pageNumber which is not the global one. Raw types such as integers or strings are not passed by reference but by value, which means changing the local pageNumber will not affect the global one.

Look at these examples:

function change(glob) {
  glob = 2;
}

var glob = 1;
change(glob);

After this call, glob is still equals to 1, which is what is happening in your code. Indeed we decided to call the argument "glob" but it could be anything:

function change(localParameter) {
  localParameter = 2;
}

var glob = 1;
change(glob);

On this example I assume you understand calling change should not affect your global variable. Well the exact same is happening above even if the variable names are the same.

Now to avoid that and work directly on the global variable, all you have to do is using the variable from the function and not passing it by parameter:

function change() {
  glob = 2;
}

var glob = 1;
change();

Now glob is equals to 2 because the function had a direct access to the variable above its scope. We call that closing a variable.

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

Learn something about pass-by-value and pass-by-reference.

When you call the methods with pageNumber value, it is pass-by-value which means it creates local copy of the value instead of changing the original variable.

In JS you would need to pass an object to achieve pass-by-reference and be able to change its values from within a function.

edited May 23 '17 at 10:27

Community

1
1

answered Jan 28 '16 at 11:30

Radek Pech

3,032
1
24
29

Or close the variable – floribon Jan 28 '16 at 16:17

why global variable is not changed?

2 Answers2