回答編集履歴
1
chousei
test
CHANGED
|
@@ -8,12 +8,13 @@
|
|
|
8
8
|
<script>
|
|
9
9
|
window.addEventListener('DOMContentLoaded', function () {
|
|
10
10
|
const url='sample.php';
|
|
11
|
-
|
|
11
|
+
const timerID=[];
|
|
12
12
|
const observer = new IntersectionObserver(changes=>{
|
|
13
13
|
for (const t of changes) {
|
|
14
|
+
const idx=[...document.querySelectorAll('[data-area="ajaxarea"]')].indexOf(t.target);
|
|
14
|
-
clearInterval(timerID);
|
|
15
|
+
clearInterval(timerID[idx]);
|
|
15
16
|
if(t.intersectionRatio>0){
|
|
16
|
-
timerID=setInterval(()=>fetch(url).then(res=>res.text()).then(txt=>t.target.querySelector('.article').textContent=txt),
|
|
17
|
+
timerID[idx]=setInterval(()=>fetch(url+"?id="+idx).then(res=>res.text()).then(txt=>t.target.querySelector('.article').textContent=txt),1000);
|
|
17
18
|
}
|
|
18
19
|
}
|
|
19
20
|
});
|
|
@@ -25,6 +26,12 @@
|
|
|
25
26
|
height:120%;
|
|
26
27
|
background-Color:gray;}
|
|
27
28
|
</style>
|
|
29
|
+
<div data-area="ajaxarea">
|
|
30
|
+
<h2>Ajax更新エリア0</h2>
|
|
31
|
+
<p class="article">
|
|
32
|
+
サンプルメッセージ
|
|
33
|
+
</p>
|
|
34
|
+
</div>
|
|
28
35
|
<div class="dummy">dummy</div>
|
|
29
36
|
<div data-area="ajaxarea">
|
|
30
37
|
<h2>Ajax更新エリア1</h2>
|
|
@@ -39,5 +46,13 @@
|
|
|
39
46
|
サンプルメッセージ
|
|
40
47
|
</p>
|
|
41
48
|
</div>
|
|
49
|
+
<div data-area="ajaxarea">
|
|
50
|
+
<h2>Ajax更新エリア3</h2>
|
|
51
|
+
<p class="article">
|
|
52
|
+
サンプルメッセージ
|
|
53
|
+
</p>
|
|
54
|
+
</div>
|
|
42
55
|
<div class="dummy">dummy</div>
|
|
43
56
|
```
|
|
57
|
+
|
|
58
|
+
複数タイマーを走らせる可能性を考慮して調整しました
|