阅读 2248

Vue实现数据的懒加载节流版

收藏总有用武之地
当数据很多的时候,不能一页显示完,同时一次请求数据量太大,会增加网页渲染的时间,影响体验,又不想做分页,这时候就很适合懒加载了。
看前先点赞,养成好习惯哈哈哈

在了解它的原理前,需要分清楚三个属性:

scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位

scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。

clientHeight:元素客户区的大小,指的是元素内容及其边框所占据的空间大小,实际上就是可视区域的大小。.

如何判断滚动条滚到底部了呢:scrollHeight - scrollTop - clientHeight = 0

懒加载

 handleScroll(event) {
      //标准浏览器中:定义一个形参event,但当事件触发的时候,并没有给event赋实际的值,则浏览器会把”事件“的对象赋给这个形参e,这时这个e是个系统级的对象:事件;
      const scrollDistance =
        // 正文全文高
        event.target.scrollHeight -
        // 被卷去的高
        event.target.scrollTop -
        // 可见区域的宽度
        event.target.clientHeight;
      // 滚动条距离底部小于等于0证明已经到底了,可以请求接口了
      if (scrollDistance <= 0 ) {
        //这个开关是为了避免请求数据中 再次被请求
        if (this.onOff) return;
        this.onOff = true;
        // 当前页数和总页数在第一次请求数据就要保存起来
        let pageNum = this.pageNum;
        //当前页数小于总页数 就请求
        if (pageNum < this.pages) {
          pageNum += 1;
          let data = { pageNumber: pageNum, pageSize10 };
          //开始请求数据
          enquiryAllList(data).then(res => {
            this.onOff = false;
            this.pageNum = res.result.pageNum;
            this.tableData = this.tableData.concat(res.result.list);
          });
        }
      }
    },
复制代码

如果没做防抖或者标记的话,在请求也比较慢就可能出问题

节流函数

这里有参考大佬的防抖与节流的博客性能优化之防抖和节流
throttle(fn, wait) {
      let context, args;
      let previous = 0;
      return function({
        let now = +new Date();
        context = this;
        args = arguments// 取throttle执行作用域的this
        if (now - previous > wait) {
          fn.apply(context, args); // 用apply指向调用throttle的对象,相当于throttle.fn(args);
          previous = now;
        }
      };
复制代码

懒加载Plus节流版

handleScroll(event) {
      //标准浏览器中:定义一个形参event,但当事件触发的时候,并没有给event赋实际的值,则浏览器会把”事件“的对象赋给这个形参e,这时这个e是个系统级的对象:事件;
      const scrollDistance =
        // 正文全文高
        event.target.scrollHeight -
        // 被卷去的高
        event.target.scrollTop -
        // 可见区域的宽度
        event.target.clientHeight;
      // 滚动条距离底部小于等于0证明已经到底了,可以请求接口了
      if (scrollDistance < = 0 ) {
        //这个开关是为了避免请求数据中 再次被请求
        if (this.onOff) return;
        this.onOff = true;
        // 当前页数和总页数在第一次请求数据就要保存起来
        let pageNum = this.pageNum;
        //当前页数小于总页数 就请求
        if (pageNum < this.pages) {
          pageNum += 1;
          let data = { pageNumber: pageNum, pageSize10 };
          enquiryAllList(data).then(res => {
            this.onOff = false;
            this.pageNum = res.result.pageNum;
            this.tableData = this.tableData.concat(res.result.list);
          });
        }
      },
    // 节流
    throttle(fn, wait) {
      let context, args;
      let previous = 0;
      return function({
        let now = +new Date();
        context = this;
        args = arguments// 取throttle执行作用域的this
        if (now - previous > wait) {
          fn.apply(context, args); // 用apply指向调用throttle的对象,相当于throttle.fn(args);
          previous = now;
        }
      };
    },
复制代码

关于调用

如果不封装 直接调用的话,每次调用都会创建一个新的(匿名)函数 请参考MDN

 throttleFun(event) {
      this.throttle(this.handleScroll(event), 1000);
    }
复制代码

然后在mounted函数中

 window.addEventListener("scroll"this.throttleFun, true);
复制代码

最后

来自平时的工作记录
挺实用的方法,快点赞收藏起来方便下次用!
在评论区留下您宝贵的建议~

干货推荐

JavaScript优雅写法及骚操作

年底面试之JavaScript总结(超用心)

React系列-轻松学会Hooks

TypeScript实现Map与HashMap

文章分类
前端
文章标签