定时器每隔n秒请求n条数据，setInterval分批请求数据

陶瓷小兔

已于 2023-09-16 19:00:55 修改

阅读量245

点赞数

文章标签：前端 js jq

于 2023-09-11 22:05:30 首次发布

本文链接：https://blog.csdn.net/miaomiao006/article/details/132818583

版权

<!DOCTYPE html>
<html>
    <script>
        //需要分页的数组
        let arr = [1,2,3,4,5,6,7,8,9,10]
        
        //分割数组，每页4条
        splitArr(arr,4)

        /**
         * 分割数组
         */
        function splitArr(idList,size){
            //当前页数
            let num  = 1
            //共多少页
            let count = Math.ceil(idList.length / size)

            //定时器
            let timer = setInterval(function(){
                //起始下标，根据页码计算 （当前页 - 1）* 每页条数
                let start =  (num - 1) * size
                //结束下标，起始下标 + 每页条数
                let end = start + size
                console.log("start:end",start,end)

                //需要的数据
                let splitArr = idList.slice(start, end)
                console.log(splitArr)

                //页码加1
                num++
                console.log("num",num)

                //超出最大页数，清除定时器
                if(num > count){
                    clearInterval(timer)
                }

                //请求数据，渲染节点
                queryData(splitArr)
            },1000)
        }

        /**
         * 分批请求数据
         */
        function queryData(splitIds){
            for (let i = 0; i < splitIds.length; i++) {
                const element = splitIds[i];
                //请求数据
                renderHtml(element)
            }
        }

        /**
         * 请求数据，根据返回数据渲染节点
         */
        function renderHtml(id){
            //根据id请求数据
            $.ajax({
                url:"http://localhost:8080/16_AJAX//ajaxServlet",
                // data:"action=jQueryAjax",
                data:{id:id},
                type:"GET",
                dataType : "json",
                success:function (data) {
                    //根据返回数据渲染节点
                    
                }
            });
        }
    </script>
</html>