CODEWITHSUNDEEP
javascriptasp.net-mvc
Vasiliy
Vasiliy

Reputation: 151

why global variable is not changed?

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.

Upvotes: 0

Views: 57

Answers (2)

Radek Pech
Radek Pech

Reputation: 3098

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.

Upvotes: 0

floribon
floribon

Reputation: 19193

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.

Upvotes: 1

Related Questions