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

时间:2020-7-1 作者:admin

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

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

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, pageSize: 10 };          //开始请求数据          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, pageSize: 10 };          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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:87074139@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。