Vue中，Web页面滚动到底部自动加载数据，快速下滑没问题，慢慢下滑，会重复请求，如何解决

Question

如题所述，我再贴几张示例图

相对快速滚动鼠标，输出信息如下

如果慢慢滚动鼠标到底部，输出信息如下

这个问题怎么破。。。。。。难不成只能快速滑动。明显不友好啊，贴一下我的代码

    //滚动到底部，自定加载数据
       scroll(){
          window.onscroll = () =>{
            /**
             * document.documentElement.offsetHeight：网页可见区域高，获取元素自身的高度（包含边框）
             * document.documentElement.scrollTop; 获取当前页面的滚动条纵坐标位置，网页被卷去的高
             * window.innerHeight：获取浏览器页面可用高度
             */
            let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight < 100;
            //注：只有距离满足条件，允许加载下一页数据，且当前page为1,2,3时，才允许滚动加载
            if (bottomOfWindow && this.loadMore === true && this.page<=3){
              console.log("请求加载数据，请求page为",this.page);
              this.get_article_list(this.page);
            }
          }
        },

      mounted(){
        //滑到距离底部一定距离时，自动加载下一页的数据
        this.scroll();
      },

注：代码是网上找的，新手不太搞得懂这个，求大佬帮忙

Answer 1

let flag = true;
window.onscroll = () =>{
    if(你的条件 && flag){
        flag = false;
        ajax().finally(()=>{
            flag = true
        })
    }
}

Answer 2

加个防抖，避免多次请求不就完了