页面滚动加载加锁

页面滚动加载加锁

什么是页面滚动加载？

当你把页面滑动到最低端时候，HTTP再次触发请求，每一次触发请求就可以简单地请求几十条,以此往复循环。

优势：不用一下子把数据全部请求，以免造成数据请求数量太多，导致页面加载时间长，从而容易浏览页面的人容易烦躁。

 // 页面滚动
        var page = 1;
         // 页面滚动
         //当浏览者拖动滚动条的时 滑动 滚动时触发
        window.onscroll = function () {
        //顶部高度
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
           //窗口高度
            var Height = window.innerHeight;
            //页面高度
            var pageHeight = document.body.offsetHeight || document.documentElement.offsetHeight;
           // 如果顶部高度加窗口高度>=页面高度，也就是说页面滑动到底部，这时候，就要请求新的数据
            if (Height + scrollTop >= pageHeight) {
               //page监测是第几页
                page++;
                //请求数据，并把数据放到res里
                axios.get("http://localhost:9090/artist/artistInfo?category=" + x + "&pn=" + page + "&rn=24&prefix=" + shuzu[y]).then(res => {
                //下面是对请求到的数据进行的一些操作，不用在意这些细节
                    var arr = res.data.artistList;
                    arr.forEach(item => {
                        str = str +
                            ` <li>
                        <img src="${item.pic300}" alt="">
                        <h3>${item.name}</h3>
                        <p>粉丝量：${item.artistFans}</p>
                            </li>
                            `
                    })
                })
            }
        }

以上可以很好地解决请求数据过慢的问题

但是也容易造成新的问题——就是没有设置加锁，导致滑动到底部，一下子请求多条数据（如下图）

可以看到数据是一下子出现4条，也就是滑动到底部就立刻请求了4次，因此要对这个页面滚动加载加

锁，让它每次仅仅请求一次数据。

   var page = 1;
        // 初始值为真
        var flag = true;
          // 页面滚动
         //当浏览者拖动滚动条的时 滑动 滚动时触发
        window.onscroll = function () {
          //顶部高度
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
             //窗口高度
            var Height = window.innerHeight;
              //页面高度
            var pageHeight = document.body.offsetHeight || document.documentElement.offsetHeight;
              // 如果顶部高度加窗口高度>=页面高度，也就是说页面滑动到底部，这时候，就要请求新的数据
            if (Height + scrollTop >= pageHeight) {
                //发现页面滑动到底部
                if (flag) {
                    //  进入后，进行加锁，一同请求的其他数据就无法进入在这里插入图片描述

                    flag = false;
                     //page监测是第几页
                    page++;
                      //请求数据，并把数据放到res里
                    axios.get("http://localhost:9090/artist/artistInfo?category=" + x + "&pn=" + page + "&rn=24&prefix=" + shuzu[y]).then(res => {
                     //下面是对请求到的数据进行的一些操作，不用在意这些细节
                        var arr = res.data.artistList;
                        //请求到数据，解锁
                        flag = true;
                        
                        arr.forEach(item => {
                            str = str +
                                ` <li>
                        <img src="${item.pic300}" alt="">
                        <h3>${item.name}</h3></li> `
                        })
                    })
                }
            }
        }

如下图，现在就仅能一条一条的请求