100個ある配列を10個呼び出し、11個目からは無限スクロールで呼び出したい

前提・実現したいこと

使用言語：HTML,JS( jquery-2.2.3.min.js )

実現したいこと：

htmlが読み込まれた時点で20個ある配列のうち10個(1~10)を呼び出す
10個目が画面に入ったら、次の10個(11~20)を呼び出す

※配列userDataは最大100個まで入る想定です

現状：
userDataの1個目から10個目までは呼び出せましたが、
10個目が画面に入ってから次の11個~20個を呼び出すことができません。
検索してもなかなか実現できず、方法をご教授いただきたいです。

js
1$(function(){
2    var userData = [
3        {id: 1,uId: 'userId1', name: '1aaa',},
4        {id: 2,uId: 'userId2', name: '2aaa',},
5        {id: 3,uId: 'userId3', name: '3aaa',},
6        {id: 4,uId: 'userId4', name: '4aaa',},
7        {id: 5,uId: 'userId5', name: '5aaa',},
8        {id: 6,uId: 'userId6', name: '6aaa',},
9        {id: 7,uId: 'userId7', name: '7aaa',},
10        {id: 8,uId: 'userId8', name: '8aaa',},
11        {id: 9,uId: 'userId9', name: '9aaa',},
12        {id: 10,uId: 'userId10', name: '10aaa',},
13        {id: 11,uId: 'userId11', name: '11aaa',},
14        {id: 12,uId: 'userId12', name: '12aaa',},
15        {id: 13,uId: 'userId13', name: '13aaa',},
16        {id: 14,uId: 'userId14', name: '14aaa',},
17        {id: 15,uId: 'userId15', name: '15aaa',},
18        {id: 16,uId: 'userId16', name: '16aaa',},
19        {id: 17,uId: 'userId17', name: '17aaa',},
20        {id: 18,uId: 'userId18', name: '18aaa',},
21        {id: 19,uId: 'userId19', name: '19aaa',},
22        {id: 20,uId: 'userId20', name: '20aaa',},
23    ];                
24    let ii = 0;
25    let userData = (function(){
26        for(ii; ii < 10; ii++){
27        if(userData[ii]){
28            $('#userDataList').append(
29                '<div id="' + userData[ii].uId + '">'+
30                    '<p>'+ userData[ii].name +'</p>' +
31                '</div>'
32            );
33        }
34    }
35});
36userData();
37});

html
1<body>
2<div id="userDataList"></div>
3<!-- ここで呼び出したいです -->
4</body>

試したこと

ソースコードは家は残っていないのですが最後に試したものは以下です。

userId10が画面に入る→userData()を実行し→10を*2へ (#userId20)→userId20が画面に入る→...

上記を試しに書いてみたのですが、次の10個が読み込めず。

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

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

回答1件

ベストアンサー

サンプル

js
1//...
2    let ii = 0;
3    let userData_ = (function(){
4        const iii = ii + 10;
5        for(ii; ii < iii; ii++){
6        if(userData[ii]){
7            $('#userDataList').append(
8                '<div id="' + userData[ii].uId + '">'+
9                    '<p>'+ userData[ii].name +'</p>' +
10                '</div>'
11            );
12        }
13    }
14});
15userData_();
16    let options = {
17    }
18    let callback = (entries, observer) => {
19        if (entries[0].isIntersecting) userData_();
20    };    
21    let observer = new IntersectionObserver(callback, options);
22    var target = document.querySelector('#userId10');
23    observer.observe(target);
24});