分页请求下一条数据

分页获拉取下一页数据

function loadNextPageData(self, callball) {
  if (window.IntersectionObserver) {
    const options = {
      root: null,
      threshold: 0
    }
    const handleIntersect = (entries, observer) => {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting || entry.intersectionRatio || entry.isIntersecting === undefined) {
          self.requesting = true
          if (self.requesting && self.count > 0) {
            self.requesting = false
            self.pageIndex += 1
            await callball(self.pageIndex)
            self.requesting = true
          } else {
            self.isLoading = true // 不显示
            self.noMore = true // 加载到最后一页无数据了
            observer.unobserve(entry.target)
          }
        }
      })
    }
    const observer = new IntersectionObserver(handleIntersect, options)
    if (!self.isLoading) observer.observe(self.$refs.loading.$el.firstChild)
  }
}
引用\[1\]中的代码是一个封装了AJAX函数的示例,用于请求10w条数据。该函数使用XMLHttpRequest对象发送GET请求,并通过Promise对象返回请求结果。引用\[2\]中提到,为了减少渲染的开销,可以每次只渲染10条数据,而不是一次性渲染10w条数据。这样可以避免卡顿的问题。引用\[3\]中的代码展示了一种分页渲染数据的方法,将10w条数据按照每页数量limit分成多页,利用setTimeout每次渲染一页数据,从而减少渲染时间。 对于Vue来说,如果一次性请求一万条数据,可能会导致页面卡顿或加载时间过长。为了提高性能和用户体验,可以考虑使用分页加载数据的方式。可以将数据分成多个页面,每次只请求当前页面的数据,然后根据需要进行切换和加载。这样可以避免一次性加载大量数据造成的性能问题。 另外,可以使用Vue的异步组件或者虚拟滚动等技术来优化大数据量的渲染。异步组件可以延迟加载组件,只在需要的时候才进行渲染,从而提高页面加载速度。虚拟滚动则是只渲染可见区域的数据,而不是全部渲染,从而减少渲染的开销。 总结起来,为了一次性请求一万条数据,可以考虑使用分页加载数据、异步组件或虚拟滚动等技术来提高性能和用户体验。 #### 引用[.reference_title] - *1* *3* [后端一次给你10万条数据,如何优雅展示,到底考察我什么?](https://blog.csdn.net/muzidigbig/article/details/125925704)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue虚拟列表,一次性拿到10w条数据](https://blog.csdn.net/weixin_49554584/article/details/128504572)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值