1、先看个栗子
在很多网站中都有这样一个功能,在页面显示一个按钮,用于返回页面的顶部,这个按钮只会在页面滚动到一定位置的时候出现,如:
这个功能的核心内容是----监听浏览器的滚动事件,返回当前滚动条与顶部之间的距离
具体的代码如下所示:
function show_scrollPosition(){
var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
console.log("当前滚动条位置为:",scrollPosition);
}
window.onscroll = show_scrollPosition
运行时(在chrome中,选中滚动条,点击一次键盘向下的方向键 ↓ )的结果如下所示:
在上图中我们可以看到,这个事件的执行频率很高,非常消耗浏览器的性能,在实际的运行中我们并不需要这么高频率的执行反馈。
为了避免这种场景,常见的优化方式有:防抖和节流
2、防抖(debounce)
JS防抖的基本思路是:规定一个期限时间,在首次触发事件时,不立即执行回调函数,而是在期限时间后再执行,如果期限时间内回调函数被重复执行,则期限时间重新计时。
在这里要用到setTimeOut()函数,判断期限值范围内该执行函数是否执行过,则需要一个变量来保存执行的结果。代码实现如下所示:
/*
*fn --> 需要防抖的函数;
*delaytime --> 毫秒数,防抖所需期限值;
*/
function debounce(fn,delaytime){
let timer = null
return function(){
if(timer){
clearTimeout(timer) //进入这里说明当前存在一个执行过程,并且同时又执行了一个相同事件,故取消当前的执行过程
}
timer = setTimeout(fn,delaytime)
}
}
function show_scrollPosition(){
var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
console.log("当前滚动条位置为:",scrollPosition);
}
window.onscroll = debounce(show_scrollPosition,1000)
运行结果显示,当前滚动停止1s后,才会打印当前的滚动条位置,而且每次值打印当前的位置。
防抖的缺点
由上述的例子可以看出防抖的缺点在于,事件执行完期限值范围内没有重复触发事件,才能再次执行该回调函数,若是期限范围内,不停的触发该事件,则回调函数不会执行,比如一直按着键盘的向下方向键,则一直不会打印出当前的滚动距离。
防抖的应用场景
(1)用户在输入框中输入一串字符,只会在最后一次输入完成后再去执行查询ajax请求,这样可以有效减少请求的次数,节约请求资源。
(2)window的scroll、resize事件,不断地滚动、或调整浏览器窗口大小时触发的对应事件,可以允许其只触发一次。
3、节流(throttle)
JS中节流的基本思路是:规定一个期限时间,在该时间内,触发事件的回调函数只能执行一次,如果期限时间内回调函数被多次触发,则只有一次能生效。
代码实现过程如下所示:
function throttle(fn, delay) {
let last_time
let timer = null
return function () {
let cur_time = new Date().getTime()
if (last_time && cur_time < last_time + delay) { //若为真,则表示上次执行过,且在期限值范围内
clearTimeout(timer)
timer = setTimeout(() => {
fn();
last_time = cur_time
}, delay)
} else {
last_time = cur_time;
fn();
}
}
}
function show_scrollPosition() {
var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
console.log("当前滚动条位置为:", scrollPosition);
}
window.onscroll = throttle(show_scrollPosition, 1000)
节流的道理其实就是让函数执行一次后,在某个时间段内暂时失效,过了这个时间段后再重新激活。
节流的应用场景
(1)在页面无限加载的情况下,需要用户再滚动页面时,每隔一定时间发起一次ajax请求,而不是再用户停下滚动时再去请求数据;
(2)监听滚动事件,比如是否滑倒底部自动加载更多,则用节流来判断;