jQueryのreturnについて

Question

jqueryについて質問です
returnで値が返ってこないのですがどのように改善したらいいのでしょうか

$(function(){
	$("#a").bind('keyup',function test(Sum){
		var Sum = $('.b').length;
		return ;
	});
	$(window).scroll(function test(Sum) {
		if($(window).scrollTop() + $(window).height() >= $(document).height()) {
			var Sum = $('.b').length;
			return ;
		}
	});
	var S = (Sum);
	console.log(S);

});

Comments

[kei344]

「値が返ってこない」はコードのどの部分について言っておられますか？

Answer 1

console.logで$('.b').lengthの値が返ってくる事を期待しているようですが、
そもそも2つの意味で期待する動作はされません。

1. jQueryのbindやscrollの引数に渡した関数は即実行されるわけではない
2. 関数スコープの制約で、関数内で宣言したSum変数は外から見えない

2は調べれば一瞬で理解出来ると思うので、1に関して軽く解説します。

---

javaScriptはシングルスレッドなので、特定の動作を行っている間は次の行を動作させることは出来ません。
なので、シングルスレッド本来の考え方であればの話ですが、
$("#a").bind('keyup', fn)でキーが上がるまでずーっと待ちぼうける作りになるはずで、一生次の行が動くことはありません。

じゃあ1個しかイベントハンドラ指定出来ないじゃんどうすんの！

JavaScriptはイベント駆動で動作します。
コードの動作どおりではなく、内部的には定期的に一瞬だけ「発火されたイベントはあるかな？（チラ見」という事を繰り返しています。
もし発火されたイベントが存在する場合、設定された関数の実行を割り込ませる事で、沢山あるイベントを次々と差し込む事が実現するわけです。

要するに「イベントが発火されたら、引数に渡した関数実行しといてね。じゃあ俺は下の行を実行するからよろしく。」というわけです。

従って、質問文の挙動は下記のようになります。

$(function(){
    $("#a").bind('keyup', fn); // イベントハンドラに設定し次の行を実行
    $(window).scroll(fn); // イベントハンドラに設定し次の行を実行
    var S = (Sum); // 上記2行の処理はまだ行われていないのでSumの値が変わる事はない
    console.log(S); // undefinedがコンソールに表示される
});

Comments

[think49]

> var S = (Sum);
ご自身で説明されている通り、変数 Sum はスコープ外なので、ReferenceError になるのではないでしょうか。
(今、検証出来る状況にないので、間違っていたら、すみません。)

[miyabi-sun]

だと思うんですけどね…
一応更に上のスコープで定義するなどしてReferenceErrorは回避出来ますので、
質問者さんの発言が正しいという前提で回答しています。

[think49]

私は「ReferenceErrorになる = 値が返ってこない」と認識していました。

Answer 2

回答いただきましてありがとうございます。
回答くださった方々の意見を参考にした結果下記のようなコードにしました。

$(function(){
	function CheckSum(){
		if($(window).scrollTop()+$(window).height()>= $(document).height()){
			console.log('S');
		}
	}
	$("#A").bind('keyup', CheckSum);
	$(window).scroll(CheckSum);
});

また、bindのほうのif条件は記載してません。