了解JS中的函数防抖与函数节流的应用场景+vue实现滚动加载更多

函数节流

发现一个问题就是当浏览器到达底部时,会多次触发函数,为了解决这个问题,进行函数节流。

浏览器中某些计算和处理要比其他的昂贵很多。例如,DOM 操作比起非 DOM 交互需要更多的内存和 CPU 时间。连续尝试进行过多的 DOM相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤其在 IE 中使用 onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。

在 onresize 事件处理程序内部如果尝试进行 DOM 操作,其高频率的更改可能会让浏览器崩溃。为了绕开这个问题,你可以使用定时器对该函数进行节流。

函数节流背后的基本思想是指,某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器

在这个项目中,是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
mounted(){
this.$refs.viewBox.addEventListener('scroll',
this.throttle(this.setpage,200),false)
},
methods:{
throttle(fn,delay,atleast){
/**函数节流方法
@param Function fn 延时调用函数
@param Number dalay 延迟多长时间
@param Number atleast 至少多长时间触发一次
@return Function 延迟执行的方法
*/
let timer = null;
let previous = null;
return function () {
var now = +new Date();
if ( !previous ) previous = now;
if ( atleast && now - previous > atleast ) {
fn();
// 重置上一次开始时间为本次结束时间
previous = now;
clearTimeout(timer);
} else {
clearTimeout(timer);
timer = setTimeout(function() {
fn();
previous = null;
}, delay);
}
}
},

}

用vue来实现一个pc端滚动加载更多,没有使用UI框架,纯手工

实现思路

1.判断浏览器滚动条是否到达底部,如果到达底部,则使用axios拉取数据
2.拉取成功后,更新数据

布局方式

这里采用了头尾固定和中间高度自适应的布局方式,中间内容块高度没有设置,所以滚动条是在div的内容区域的,并不是在页面上,然而中间内容区域出现一个滚动条不是很好看,所以可以调整一下滚动条样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*html代码*/
<div id="dHead"></div>
<div id="dBody">
<div class="mycontent">
</div>
</div>
<div id="dFoot"></div>
/*css代码*/
#dHead {
height:100px;
width:100%;
position:absolute;
z-index:5;
top:0;
}
#dBody {
width:100%;
overflow:auto;
top:100px; //top
position:absolute;
z-index:10;
bottom:100px; //bottom
}
#dFoot {
height:100px;
width:100%;
position:absolute;
z-index:200;
bottom:0;
}
/*滚动条样式*/
/*定义滚动条高度及背景 宽高分别对应横竖滚动条的尺寸*/
::webkit-scrollbar{
width:1px; /*宽高可调节,如果为0,则消失*/
height:1px;
background-color:#eaeaea;
}
/*定义滚动条轨道,内阴影+圆角*/
::webkit-scrollbar-track{
-webkit-box-shaow:inset 0 0 6px rgba(0,0,0,0.3)
border-radius:10px;
background-color:#f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::webkit-scrollbar-thumb{
border-radius:10px;
-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)
background-color:#555;
}

滚动条判断
是对元素的滚动监听,项目中是中间内容的最外层元素,这里碰到一个坑就是对中间滚动元素监听都无效,必须对中部内容块的最外层元素监听。需要获取到元素的dom节点,在vue组件里面使用的是原生js的监听事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/*html*/
<div id="dBody" ref='viewbox'>
<div class="mycontent">
</div>
/*vue*/
methods:{
setpage(){
if (this.nomore &&!this.loaded) return;//到达底部不再执行
if(this.$refs.viewBox.scrollTop+ this.$refs.viewBox.offsetHeight+20 >= this.$refs.viewBox.scrollHeight){
this.loadingTip=true
axios.get('/api/v1/topics?tab='+this.tabName+'&page='(++this.page)+'&limit=10')
.then(
res=>{
let arr=res.data.data;
if(arr.length===0){
//some tips
this.loaded=false
this.nomore=true//没有更多
return
}
// ES5的合并数组
// arr1.concat(arr2, arr3);
// ES6的合并数组
//[...arr1, ...arr2, ...arr3]
this.site=[...this.site,...arr]
this.loadingTip=false
}
)
.catch(err=>{
console.log(err)
})
}
}
}

拉取数据,加载loading
在拉取数据时,可能会有时间缓存,在等待时间里使用了一个loading图,转圈的圆环,css3写的简单转圈效果,一个画了270°的圆。使用了axios拉取数据,在回调函数中隐藏loading缓冲,因为已经拉取完成了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.loadingTip{
height:50px;
line-height:50px;
text-align:center;
color:#666666;
}
.loadingTip::before{
content:'';
width: 20px;
height:20px;
border-radius:100% 100% 100% 0;
border: 1px solid red;
display: inline-block;
border-bottom: none;
border-left:none;
box-sizing: border-box;
vertical-align:sub;
-webkit-animation:loading 1s linear infinite;
}
@keyframes loading{
0%{
transform:rotate(0deg)
}
100%{
transform:rotate(360deg)
}
}