无限滚动加载优化2

<script>
// 无限滚动加载
function scrollLoad() {
    let page = 1;
    let limit = 10;
    let flag = true;
    //渲染数据
    function renderData(data) {
        if (data.code) {
            let list = data.result.data;
            console.log(list)
            let htmlStr = '';
            for (let i =0;i<list.length;i++){
                htmlStr +='<li class="list"><a href="'+list[i].url +'" class="item">'+list[i].showTitle+'</a><p class="item-time">'+list[i].dateStr+'</p></li>'
            }
            let ulEle = document.querySelector('.content ul')
            ulEle.innerHTML += htmlStr;
            flag = true;
            
          

   **## //这里优化，当数据小于你设定的limit时不再发送ajax请求**
            if(data.result.data.length <  limit){
                console.log("over")
                $(".content ul").append("<li class='over'>加载完毕</li>")
                flag=false;
            }
      
        }
    }

    //发起ajax请求
    function sendAjax(page,limit) {
        var columnId = "${columnId}" == "" ? -1 : Number("${columnId}");
        var params = {
            page: page,
            size: limit,
            wheres: {
                columnCode: "${columnCode}",
                columnId: "${columnId}" == "" ? -1 : Number("${columnId}"),
                specialName: "",
                columnName: "",
                contributorTime_start: "",
                contributorTime_end: "",
                title: "${queryStr}",
                units: "",
                organizationId: "${organizationId}"
            }
        }
        $.ajax({
            url: "/static/columnPage?_model=" + encodeURI(JSON.stringify(params)),
            type: 'get',
            data: {
                page,
                limit
            },
            dataType: 'json',

            // loadding显示
            beforeSend:function(){
            layer.load(2); //又换了种风格，并且设定最长等待10秒
            },

            success:function(data) {
                console.log(data)
                layer.close(layer.load(2));
                renderData(data);
            }

        })
    }
    //页面初始化时，请求10条商品信息
    function init() {
        sendAjax(page,limit);
    }
    //当页面滚动到底部时加载新数据
    function scroll() {
    
    **//这里的content ul 可以替换成任何你想要滚动的对象元素**
    
        let clientHeight = document.querySelector('.content ul').clientHeight;
        let eleScroll=document.querySelector('.content ul');
        eleScroll.onscroll = function () {
            let scrollTop = eleScroll.scrollTop;
            let scrollHeight = eleScroll.scrollHeight;
            if (scrollTop + clientHeight > scrollHeight - 5) {
                // 发起新的请求
                if (flag) {
                    page++;
                    sendAjax(page,limit)
                    flag = false;
                }
            }
        }
    }
    init();
    scroll();
}
scrollLoad();


</script>