変数のスコープ範囲について

Question

	var resizeTimer = null,
			$a = $('#section_a'),
			$b = $('#section_b'),
			$c = $('#section_c'),
			aTop, a_contentTop, bTop, b_contentTop, cTop, c_contentTop;
		console.log(a_contentTop);
		$('#next_a').on('click', function() {
			$('body,html').animate({
				scrollTop: aTop
			}, 800, autoscroll_a);
		});

		$('#next_b').on('click', function() {
			$('body,html').animate({
				scrollTop: bTop
			}, 800, autoscroll_b);
		});

		$('#next_c').on('click', function() {
			$('body,html').animate({
				scrollTop: cTop
			}, 800, autoscroll_c);
		});

		$('#top').on('click', function() {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
		});

		function autoscroll_a() {
			setTimeout(function() {
				$('body,html').animate({
					scrollTop: a_contentTop
				}, 300);
			}, 800)
			console.log(a_contentTop);
		}

		function autoscroll_b() {
			setTimeout(function() {
				$('body,html').animate({
					scrollTop: b_contentTop
				}, 300);
			}, 800)
		}

		function autoscroll_c() {
			setTimeout(function() {
				$('body,html').animate({
					scrollTop: c_contentTop
				}, 300);
			}, 800)
		}

		//位置取得
		var delay = 0
		$(window).on('load resize', function() {
			clearTimeout(resizeTimer);
			resizeTimer = setTimeout(function() {

				var hSize = $(this).outerHeight();
				$('.first_btn,.title,.content').height(hSize);
				aTop = $a.offset().top;
				a_contentTop = $a.find('.content').offset().top;
				bTop = $b.offset().top;
				b_contentTop = $b.find('.content').offset().top;
				cTop = $c.offset().top;
				c_contentTop = $c.find('.content').offset().top;
				console.log(a_contentTop);

			}, delay);
			delay = 200;
		});
コード

先日からこのサイトで何度か質問させて頂いているのですが、
追加でアニメーションを加えたく、offset().top;の値を取得したかったのですが、スコープの範囲を理解できないようです。

上記のコードの中の4箇所にそれぞれ console.log(a_contentTop); を入れてみて変数のスコープ範囲を調べてみたのですが、
いまいちピンときませんでした。

※入れた個所を1~4で分け、それぞれに **「←ここ」**で印を付けています。

var resizeTimer = null,
			$a = $('#section_a'),
			$b = $('#section_b'),
			$c = $('#section_c'),
			aTop, a_contentTop, bTop, b_contentTop, cTop, c_contentTop;
		console.log(a_contentTop); ←ここ
コード

$('#next_a').on('click', function() {
			$('body,html').animate({
				scrollTop: aTop
			}, 800, autoscroll_a);
            console.log(a_contentTop); ←ここ
		});
コード

function autoscroll_a() {
			setTimeout(function() {
				$('body,html').animate({
					scrollTop: a_contentTop
				}, 300);
			}, 800)
			console.log(a_contentTop); ←ここ
		}
コード

var delay = 0
		$(window).on('load resize', function() {
			clearTimeout(resizeTimer);
			resizeTimer = setTimeout(function() {

				var hSize = $(this).outerHeight();
				$('.first_btn,.title,.content').height(hSize);
				aTop = $a.offset().top;
				a_contentTop = $a.find('.content').offset().top;
				bTop = $b.offset().top;
				b_contentTop = $b.find('.content').offset().top;
				cTop = $c.offset().top;
				c_contentTop = $c.find('.content').offset().top;
				console.log(a_contentTop); ←ここ

			}, delay);
			delay = 200;
		});
コード

まずは4からです。

ここでは関数内で、変数 a_contentTop に $a.find('.content').offset().top; という値を代入しているので
その関数内で変数を呼び出せているという事は何となく理解できます。

次に1です。
ここが理解できていないのですが
4で値を代入した変数を1で呼び出しているのですが、
1でconsole.log(a_contentTop);をしても値がundefinedになります。
つまり値が未定義の状態だという事です。

なのにもっと分からないのが、2と3ではclickイベント発火時に **console.log(a_contentTop); **が呼び出せています。

自分でも参考書を読んだり、サイトで検索しているのですが
今回のコードの参考となる情報は見つかりませんでした。

もっと理解を深めていきたいので、ここを勉強した方が良いなどの情報がありましたら
教えて頂けるとありがたいです。

宜しくお願いします。

Answer 1

ここを勉強した方が良い

https://ja.javascript.info/

Comments

[退会済みユーザー]

ありがとうございます。
参考にさせて頂きます。

Answer 2

4で値を代入した変数を1で呼び出しているのですが、

コードの実行される順番にを考えましょう。1を実行する時点では、4はまだ実行されていませんので、初期値のundefinedのままとなっています。

2や3では、4で実行された後にクリックが行われれば、変数の値を使うことができます。

Comments

[退会済みユーザー]

早速のご回答ありがとうございます。
1を実行する時点では、4はまだ実行されていないという事は
loadとresizeが行われていないという事でしょうか？
何かイベントが発生しないと関数内のローカル変数の値は使えないという事でしょうか？
1と2,3の違いがクリックイベントだという理解しかないのでいまいち分からないです。
申し訳ございません。

[退会済みユーザー]

var resizeTimer = null,
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {ここに4の変数}, delay);
delay = 200;
1が実行されていない原因は4のloadを遅延させているの為でしょうか？

[maisumakun]

> 1を実行する時点では、4はまだ実行されていないという事は
loadとresizeが行われていないという事でしょうか？

はい、1は4のイベントをセットするより前に実行されるコードですので、1のほうが先に実行されます。

仮に1の実行時点でloadイベントが済んでいたとすれば4のコードは実行すらされないことになりますが、現実にはloadイベントは画像などすべてのリソースの読み込みを待つので、1の実行より後にイベント発生します。

[maisumakun]

delayは無関係です。

[maisumakun]

> 何かイベントが発生しないと関数内のローカル変数の値は使えないという事でしょうか？

いえ、そんな事はありません。1の箇所で値を代入すれば、それ以降のコードからそのまま利用できます。

[退会済みユーザー]

ありがとうございます。
大変勉強になりました！