Detailed explanation of function throttling that triggers the onScroll event in JavaScript

Problem Description

Common website layout, a navigation bar at the top, we assume that this page has four columns: A, B, C, D, we click A, the anchor point jumps Go to column A, and the A button at the top is highlighted; click B, and the anchor jumps to column B, and the B button at the top is highlighted; we scroll in the Main component, and when we scroll to the B module, the B button is highlighted. The above is a model we often encounter in development. If you used jQuery for front-end development in the past, you would be very familiar with it.

Solution

I mainly want to talk about performance optimization methods in React component development.

Our page structure is like this

<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 />

We set the onScroll event in the main component. In this event, we trigger the action and pass the status change to Subassembly.

My scroll event triggering function is like this (ignore the long list of if else, this is the ultimate solution to solve the bug for an afternoon, this article will not go into detail)

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;
 }
}

Among them, the changeScrollFlag() function is our action processing function.

Our function throttling

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);
 }
 };
}

Our throttling function returns a function that sets a timestamp. If the difference in our timestamps is smaller, we do nothing. Do it, but the difference between our timestamps is large, clear the timer, and trigger the scroll function. This seems to be quite simple, yes, it is indeed quite simple.

So what else do we need to do in the sub-component?

Receive action

The second-level container component receives the action and passes props to the third-level display component through the second-level container component.

We must receive this props in componentWillReceiveProps.

Remember, using this.props in componentWillReceiveProps will not receive changes in props! ! ! The component lifecycle function contains a parameter of its own.

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

Our state controls which button we highlight, which is a number.

Change the style of the navigation bar

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

Here, we have completed triggering an event from the top-level component, and achieved function throttling, passing the event layer by layer. A process to get to the underlying presentation components.
Some recent feelings about front-end development

Don’t call a function repeatedly in a component, this will cause huge consumption! Don't write a new function for what we can do with the ternary operator and template strings.

jsx Don’t be too redundant. We try to write it in the form of variables, otherwise the page structure will be complicated and it will be difficult for us to catch bugs.

Reduce back-end requests, save cookies if you can, and save localStorge if you can save localStorge.

Try to write simple components by yourself. Do not use other people’s components. Otherwise, you will have huge difficulties in changing requirements and adjusting styles, and you will do some meaningless things.

Summary

The above is the entire content of this article. I hope the content of this article can bring some help to everyone's study or work. If you have any questions, you can leave a message to communicate.

For more detailed explanations of function throttling that triggers the onScroll event in JavaScript, please pay attention to the PHP Chinese website!