スクロールが一番下に来るたびに発火するjavascript

下記【index.html】はスマホにあります。
仕様としては、読み込みと同時にサーバ側のhttp://example.com/next0001.phpを自動で呼び出します。
(document.getElementById('test').click(); にてfunction loadText0001()を呼び出す)

やりたい事
このページをスクロールすると自動的にサーバ側の next0002.php next0003.php next0004.php と連続して取得していきたいというのが趣旨です。

そこで改良型【index.html】を作りました。

【期待したこと】
スクロールが一番下にいくと、$(window).scroll(function() で規定したswitchが起動し、次のページを表示させ続けるはずです。

【結果】
スクロールが最初に一番下に行ったとき無事に
switch (hoge){
case 1:
document.getElementById('test0002').click();
break;
が発火し、http://example.com/next0002.php を読み込みました。

しかしながら、そのままスクロールしてnext0002.phpの表示部分の最下部に来ても次の
switch (hoge){
case 2:
document.getElementById('test0003').click();
break;
が発火せず、http://example.com/next0003.php を読み込むことができません。

$(window).scroll(function() { は最初の発火で仕事を辞めたようです。

break; の部分を削ってみましてが状況は変わりません。

これをnext0003.php next0004.php とスクロールの度に発火させるにはどうすればいいでしょうか?

よろしくお願いいたします。

スマホ側

【index.html】

html
1
2
3<html>
4<script src="jquery.min.js"></script>
5<script src="jquery.xdomainajax.js"></script>
6<script type="text/javascript">
7<!--
8var xmlHttp0001;
9function loadText0001(){
10  xmlHttp0001 = new XMLHttpRequest();
11  xmlHttp0001.onreadystatechange = checkStatus0001;
12  xmlHttp0001.open("GET", "http://example.com/next0001.php", true);
13  xmlHttp0001.send(null);
14}
15function checkStatus0001(){
16  if (xmlHttp0001.readyState == 4 && xmlHttp0001.status == 200){
17 var data0001 = xmlHttp0001.responseText;
18document.getElementById("id_0001").innerHTML = data0001; 
19  }
20}
21// -->
22</script>
23<form>
24<input id="test0001" type="hidden" onClick="loadText0001()">
25</form>
26<script>
27document.getElementById('test0001').click();
28</script>
29<div id="id_0001"></div>
30</html>
31

改良型【index.html】

html
1<html>
2<script src="jquery.min.js"></script>
3<script src="jquery.xdomainajax.js"></script>
4
5<script type="text/javascript">
6
7<!--
8var xmlHttp0001;
9function loadText0001(){
10  xmlHttp0001 = new XMLHttpRequest();
11  xmlHttp0001.onreadystatechange = checkStatus0001;
12  xmlHttp0001.open("GET", "http://example.com/next0001.php", true);
13  xmlHttp0001.send(null);
14}
15function checkStatus0001(){
16  if (xmlHttp0001.readyState == 4 && xmlHttp0001.status == 200){
17 var data0001 = xmlHttp0001.responseText;
18document.getElementById("id_0001").innerHTML = data0001; 
19  }
20}
21// -->
22
23
24<!--
25var xmlHttp0002;
26function loadText0002(){
27  xmlHttp0002 = new XMLHttpRequest();
28  xmlHttp0002.onreadystatechange = checkStatus0002;
29  xmlHttp0002.open("GET", "http://example.com/next0002.php", true);
30  xmlHttp0002.send(null);
31}
32function checkStatus0002(){
33  if (xmlHttp0002.readyState == 4 && xmlHttp0002.status == 200){
34 var data0002 = xmlHttp0002.responseText; 
35document.getElementById("id_0002").innerHTML = data0002; 
36  }
37}
38// -->
39
40
41<!--
42var xmlHttp0003;
43function loadText0003(){
44  xmlHttp0003 = new XMLHttpRequest();
45  xmlHttp0003.onreadystatechange = checkStatus0003;
46  xmlHttp0003.open("GET", "http://example.com/next0002.php", true);
47  xmlHttp0003.send(null);
48}
49function checkStatus0003(){
50  if (xmlHttp0003.readyState == 4 && xmlHttp0003.status == 200){
51 var data0003 = xmlHttp0003.responseText;                       // Ｅ
52document.getElementById("id_0003").innerHTML = data0003; 
53  }
54}
55// -->
56
57
58
59</script>
60<form>
61<input id="test0001" type="hidden" onClick="loadText0001()">
62</form>
63<script>
64document.getElementById('test0001').click();
65</script>
66
67<div id="id_0001"></div>
68<div id="id_0002"></div>
69<div id="id_0003"></div>
70
71
72
73
74<script>
75$(window).scroll(function() {
76     var current = $(window).scrollTop() + window.innerHeight;
77     if (current < $(document).height() - 50) return; // 最下部でなければ抜ける
78     if ($(this).data('loading')) return; // ロード中は抜ける
79     $(this).data('loading', true); // ロード中にする
80     // ----- 実行処理 -----
81        var hoge = Sample3_form.X.value; 
82        hoge = parseInt(hoge); 
83switch (hoge){
84case 1:
85document.getElementById('test0002').click();
86	break;
87case 2:
88document.getElementById('test0003').click();
89	break;
90case 3:
91document.getElementById('test0004').click();
92	break;
93}
94});
95</script>
96</html>

サーバー側

【example.com/next0001.php】

html
1<html>
2
3内容0001
4
5<center>
6<form name="Sample3_form">
7<input name="X" id="test0002" type="button" value="1" onClick="loadText0002()">
8</form>
9</center>

【example.com/next0002.php】

html
1<html>
2
3内容0002
4
5<center>
6<form name="Sample3_form">
7<input name="X" id="test0003" type="button" value="2" onClick="loadText0003()">
8</form>
9</center>

【example.com/next0003.php】

html
1<html>
2
3内容0003
4
5<center>
6<form name="Sample3_form">
7<input name="X" id="test0004" type="button" value="3" onClick="loadText0004()">
8</form>
9</center>

行動規範の内容に同意します

回答1件

ベストアンサー

'loading' が true になった後ロードが完了しても false にならないからでは？

JavaScript
1$(this).data('loading', true);

投稿2017/01/14 02:50

kei344

総合スコア69400

tajix_japan

2017/01/14 08:06

有難うございます。下記のようにしてみましたがやはり3ページ目の読み込みをすることができませんでした。他にお気づきのことが御座いましたら教えてください。よろしくお願いいたします。 <script> $(window).scroll(function() { var current = $(window).scrollTop() + window.innerHeight; if (current < $(document).height() - 50) return; // 最下部でなければ抜ける if ($(this).data('loading')) return; // ロード中は抜ける $(this).data('loading', true); // ロード中にする // ----- 実行処理 ----- var hoge = Sample3_form.X.value; hoge = parseInt(hoge); switch (hoge){ case 1: document.getElementById('test0002').click(); break; case 2: document.getElementById('test0003').click(); break; case 3: document.getElementById('test0004').click(); break; } $(this).data('loading', false); // 処理が終わったらフラグをたおす }); </script>