快捷導航

JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流詳解

更新時間：2016年12月14日 10:52:21 作者：Encounter

這篇文章的內(nèi)容是說說最近在工作中遇到過的常見的問題。主要是關(guān)于JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流，文中由一個常見的問題開始展開，一步步的介紹解決的方法，有需要的朋友們下面來跟著小編一起看看吧。

問題描述

常見的網(wǎng)站布局，頂部一個導航欄，我們假設(shè)本頁面共有四個欄目：分別為A、B、C、D，我們點擊A，錨點跳轉(zhuǎn)至A欄目，同時頂部的A按鈕高亮；點擊B，錨點跳轉(zhuǎn)至B欄目，同時頂部的B按鈕高亮；我們在Main組件里面滾動，滾動到B模塊時，B按鈕高亮。以上是我們經(jīng)常會在開發(fā)中遇到的一個模型。如果是在以前，用jQuery作前端開發(fā)的話，實在是太熟悉不過了。

解決方案

主要想談?wù)勗赗eact組件化開發(fā)中的性能優(yōu)化方法。

我們的頁面結(jié)構(gòu)是這樣的

<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組件里設(shè)定onScroll事件，在這個事件中，我們觸發(fā)action，通過redux將狀態(tài)的變化傳遞到子組件。

我的scroll事件觸發(fā)函數(shù)是這樣的（忽略一長串的if else，這是一個解決了一下午的bug的終極解決方案，此文不做累述）

 handleScroll() {
 const { changeScrollFlag } = this.props.actions;
 // 根據(jù)滾動距離修改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';
 }
 // 得到基礎(chǔ)信息區(qū)域、股東信息區(qū)域、主要人員區(qū)域、變更記錄區(qū)域的offsetTop,我們把它用來跟main的scrollTop比較
 // 比較的結(jié)果觸發(fā)action，改變TitleBox組件樣式
 if (this.main.scrollTop < holderinformation) {
 // 基礎(chǔ)信息區(qū)域
 if (basicinformation === -121) {
 // 如果基礎(chǔ)信息模塊不存在，我們什么也不做（當然理論上基礎(chǔ)信息模塊應(yīng)該是會有的）
 return;
 }
 changeScrollFlag(1);
 return;
 } else if (this.main.scrollTop < mainpeople) {
 // 股東信息區(qū)域
 changeScrollFlag(2);
 if (holderinformation === -121) {
 // 如果股東信息欄目不存在，在滾動的時候我們不應(yīng)該強行把TileBox的高亮按鈕設(shè)置為holderinformation
 // 因為holdinformation并不存在，我們跳到前一個按鈕，讓基礎(chǔ)信息按鈕高亮
 changeScrollFlag(1);
 return;
 }
 return;
 } else if (this.main.scrollTop < changerecord) {
 // 主要人員區(qū)域
 changeScrollFlag(3);
 if (mainpeople === -121) {
 // 如果主要人員欄目不存在，在滾動的時候我們不應(yīng)該強行把TileBox的高亮按鈕設(shè)置為mainpeople
 // mainpeople并不存在，我們跳到前一個按鈕，讓基礎(chǔ)信息按鈕高亮
 changeScrollFlag(2);
 if (holderinformation === -121) {
 // 如果主要人員欄目不存在，而且連股東信息欄目也沒有，我們跳到高亮基礎(chǔ)信息欄目
 changeScrollFlag(1);
 return;
 }
 return;
 }
 return;
 } else if (this.main.scrollTop > changerecord) {
 // 與上面同理
 // 變更記錄區(qū)域
 changeScrollFlag(4);
 if (changerecord === -121) {
 changeScrollFlag(3);
 if (mainpeople === -121) {
 changeScrollFlag(2);
 if (holderinformation === -121) {
  changeScrollFlag(1);
  return;
 }
 return;
 }
 return;
 }
 return;
 }
}

其中，changeScrollFlag()函數(shù)是我們的action處理函數(shù)。

我們的函數(shù)節(jié)流

throttle() {
 // onScroll函數(shù)節(jié)流
 let previous = 0;
 // previous初始設(shè)置上一次調(diào)用 onScroll 函數(shù)時間點為 0。
 let timeout;
 const wait = 250;
 // 250毫秒觸發(fā)一次
 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);
 }
 };
}

我們的節(jié)流函數(shù)返回一個函數(shù)，設(shè)定一個時間戳，如果我們時間戳的差值較小，我們什么也不做，但我們的時間戳的差值較大，清除定時器，觸發(fā)scroll函數(shù)。這樣看起來似乎挺簡單，對，確實是挺簡單的。

那么在子組件我們還需要怎么做呢？

接收action

二級容器型組件接收action，通過二級容器型組件傳遞props至三級展示型組件。

我們一定要在componentWillReceiveProps接收到這個props。

記住，在componentWillReceiveProps里使用this.props是并不能夠接收到props的變化的?。。〗M件生命周期函數(shù)含有一個自己的參數(shù)。

 componentWillReceiveProps(nextProps) {
 // 在compoWillReceiveProps里接收到Main組件里所觸發(fā)onScroll事件的改變activebtn樣式的index
 // 并且設(shè)置為本組件的state
 this.setState({
 activebtn: nextProps.scrollFlag.scrollIndex,
 });
}

我們的state控制我們高亮的按鈕是第幾個，它是一個數(shù)字。

更改導航條的樣式

在這里，我使用了React周邊的庫：classnames，詳情參見其api。

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

在此，我們完成了一次從頂層組件觸發(fā)事件，并做到函數(shù)節(jié)流，將事件一層層傳遞至底層展示型組件的一個過程。
最近一些關(guān)于前端開發(fā)的感慨