JavaScript触发onScroll事件的函数节流详解


Posted in Javascript onDecember 14, 2016

问题描述

常见的网站布局,顶部一个导航栏,我们假设本页面共有四个栏目:分别为A、B、C、D,我们点击A,锚点跳转至A栏目,同时顶部的A按钮高亮;点击B,锚点跳转至B栏目,同时顶部的B按钮高亮;我们在Main组件里面滚动,滚动到B模块时,B按钮高亮。以上是我们经常会在开发中遇到的一个模型。如果是在以前,用jQuery作前端开发的话,实在是太熟悉不过了。

解决方案

主要想谈谈在React组件化开发中的性能优化方法。

我们的页面结构是这样的

<div
 className={style.main}
 id="main"
 ref={(main) => { this.main = main; }}
 onScroll={
 ((/detail/.test(this.props.location.pathname))) ? (() => this.throttle()()) : null
 }
>
 {this.props.children}
 <Footer />

我们在main组件里设定onScroll事件,在这个事件中,我们触发action,通过redux将状态的变化传递到子组件。

我的scroll事件触发函数是这样的(忽略一长串的if else,这是一个解决了一下午的bug的终极解决方案,此文不做累述)

handleScroll() {
 const { changeScrollFlag } = this.props.actions;
 // 根据滚动距离修改TitleBox的样式
 const { basicinformation, holderinformation, mainpeople, changerecord } = {
 basicinformation: document.getElementById('basicinformation').offsetTop - 121,
 holderinformation: document.getElementById('holderinformation').offsetTop - 121,
 mainpeople: document.getElementById('mainpeople').offsetTop - 121,
 changerecord: document.getElementById('changerecord').offsetTop - 121,
 };
 if (window.screen.availHeight > this.main.scrollTop) {
 document.getElementById('gototop').style.display = 'none';
 } else {
 document.getElementById('gototop').style.display = 'block';
 }
 // 得到基础信息区域、股东信息区域、主要人员区域、变更记录区域的offsetTop,我们把它用来跟main的scrollTop比较
 // 比较的结果触发action,改变TitleBox组件样式
 if (this.main.scrollTop < holderinformation) {
 // 基础信息区域
 if (basicinformation === -121) {
 // 如果基础信息模块不存在,我们什么也不做(当然理论上基础信息模块应该是会有的)
 return;
 }
 changeScrollFlag(1);
 return;
 } else if (this.main.scrollTop < mainpeople) {
 // 股东信息区域
 changeScrollFlag(2);
 if (holderinformation === -121) {
 // 如果股东信息栏目不存在,在滚动的时候我们不应该强行把TileBox的高亮按钮设置为holderinformation
 // 因为holdinformation并不存在,我们跳到前一个按钮,让基础信息按钮高亮
 changeScrollFlag(1);
 return;
 }
 return;
 } else if (this.main.scrollTop < changerecord) {
 // 主要人员区域
 changeScrollFlag(3);
 if (mainpeople === -121) {
 // 如果主要人员栏目不存在,在滚动的时候我们不应该强行把TileBox的高亮按钮设置为mainpeople
 // mainpeople并不存在,我们跳到前一个按钮,让基础信息按钮高亮
 changeScrollFlag(2);
 if (holderinformation === -121) {
 // 如果主要人员栏目不存在,而且连股东信息栏目也没有,我们跳到高亮基础信息栏目
 changeScrollFlag(1);
 return;
 }
 return;
 }
 return;
 } else if (this.main.scrollTop > changerecord) {
 // 与上面同理
 // 变更记录区域
 changeScrollFlag(4);
 if (changerecord === -121) {
 changeScrollFlag(3);
 if (mainpeople === -121) {
 changeScrollFlag(2);
 if (holderinformation === -121) {
  changeScrollFlag(1);
  return;
 }
 return;
 }
 return;
 }
 return;
 }
}

其中,changeScrollFlag()函数是我们的action处理函数。

我们的函数节流

throttle() {
 // onScroll函数节流
 let previous = 0;
 // previous初始设置上一次调用 onScroll 函数时间点为 0。
 let timeout;
 const wait = 250;
 // 250毫秒触发一次
 return () => {
 const now = Date.now();
 const remaining = wait - (now - previous);
 if (remaining <= 0) {
 if (timeout) {
 window.clearTimeout(timeout);
 }
 previous = now;
 timeout = null;
 this.handleScroll();
 } else if (!timeout) {
 timeout = window.setTimeout(this.handleScroll, wait);
 }
 };
}

我们的节流函数返回一个函数,设定一个时间戳,如果我们时间戳的差值较小,我们什么也不做,但我们的时间戳的差值较大,清除定时器,触发scroll函数。这样看起来似乎挺简单,对,确实是挺简单的。

那么在子组件我们还需要怎么做呢?

接收action

二级容器型组件接收action,通过二级容器型组件传递props至三级展示型组件。

我们一定要在componentWillReceiveProps接收到这个props。

记住,在componentWillReceiveProps里使用this.props是并不能够接收到props的变化的!!!组件生命周期函数含有一个自己的参数。

componentWillReceiveProps(nextProps) {
 // 在compoWillReceiveProps里接收到Main组件里所触发onScroll事件的改变activebtn样式的index
 // 并且设置为本组件的state
 this.setState({
 activebtn: nextProps.scrollFlag.scrollIndex,
 });
}

我们的state控制我们高亮的按钮是第几个,它是一个数字。

更改导航条的样式

在这里,我使用了React周边的库:classnames,详情参见其api。

<span
 className={classnames({
 [style.informationactive]: (this.state.activebtn === 1),
 })}
 onClick={() => this.handleClick(1, 'basicinformation')}
>

在此,我们完成了一次从顶层组件触发事件,并做到函数节流,将事件一层层传递至底层展示型组件的一个过程。
最近一些关于前端开发的感慨

  1. 不要在组件中反复调用一个函数,这样会造成巨大的消耗!我们可以通过三元运算符、模板字符串做到的事情,请勿写一个新的函数。
  2. jsx不要太过于冗余。我们尽量写成变量的形式,不然页面结构复杂,不易于我们捕捉bug。
  3. 减少后端请求,能存cookie则存cookie,能存localStorge则存localStorge。
  4. 简单的组件尽量自己写,请勿使用别人的组件,否则在需求更改、样式调整上会出现巨大困难并做一些无意义的事儿。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
Dec 04 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
React中获取数据的3种方法及优缺点
Feb 18 Javascript
AngularJS指令与指令之间的交互功能示例
Dec 14 #Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 #Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 #Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 #Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 #Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 #Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 #Javascript
You might like
基于文本的搜索
2006/10/09 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
javascript框架设计之框架分类及主要功能
2015/06/23 Javascript
JS日期加减,日期运算代码
2015/11/05 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
JavaScript实现in-place思想的快速排序方法
2016/08/07 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
关于vuex的学习实践笔记
2017/04/05 Javascript
JQuery扩展对象方法操作示例
2018/08/21 jQuery
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
基于python编写的微博应用
2014/10/17 Python
python pygame实现2048游戏
2018/11/20 Python
Python转换itertools.chain对象为数组的方法
2020/02/07 Python
python isinstance函数用法详解
2020/02/13 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Python文件操作及内置函数flush原理解析
2020/10/13 Python
python MD5加密的示例
2020/10/19 Python
python时间time模块处理大全
2020/10/25 Python
python tqdm库的使用
2020/11/30 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
大专生自我鉴定范文
2013/10/01 职场文书
全神贯注教学反思
2014/02/03 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript