窗口进度条及其高级使用

我们大概实现的效果就像YouTube上面的红色进度条那样。但是YouTube上面那个进度条还是很坑爹的。文章后面再告诉你们为什么。

首先窗口的滚动进度条

窗口的滚动条非常的简单&＃xff0c;只要用 window.onscroll 事件的监听&＃xff0c;就可以实现。当然我最近在研究Vue.js&＃xff0c;所以用vue.js实现了一个。反正都差不多吧&＃xff0c;这个没什么好说的。

{{message}}

效果

优化一下

因为这里的窗口滚动进度条没有过度效果吗&＃xff08;虽然谷歌浏览器她会自动帮你优化一点过度的效果&＃xff0c;但是我们还是自己写的和谐一点点&＃xff09;&＃xff0c;所以就加多一句CSS3的动画

transition: width 1s;

到这里我们的滚动进度条就基本上实现了&＃xff0c;也可以做一个很不错的水平效果。但是这个滚动还是有很多东西值得我们去研究一下的。

window.onscroll什么时候会触发

这里的window.onscroll当滚动了鼠标的滚轮的时候就会触发对吧&＃xff0c;这个无可非议。就算这个界面我们手抽搐的去滚动这个滚轮&＃xff0c;他就一直一直的触发
这样我们在我们的触发代码里面输入一个 console.log(1)

我这里指滚动了一下&＃xff0c;这里就被触发了13次&＃xff0c;虽然这个鼠标滚轮的时间开销是不大的&＃xff0c;也不用特地去做优化&＃xff0c;但是如果是一次滚动我们触发了一次服务器请求会怎么样&＃xff1f;这个结果我们不敢想象。我们既然是是去深入的挖掘它&＃xff0c;那我们就深入去看看可以怎么优化。

我们做一个延迟的滚动进度条

功能&＃xff1a;在鼠标一直滚动的时候是不会改变进度条的长度&＃xff0c;直到鼠标的滚动停止后0.5s之后才开始出发轮动条的改变&＃xff0c;即你一直在0.5s之内滚动&＃xff0c;进度条长度不会改变。
在这里我们主要是学习这个方法吧。如果模拟进度条的改变是请求服务器的话&＃xff0c;我们就可以有效的去抑制住那些疯狂请求服务器的动作。

我们要实现的效果大概是这样的&＃xff1a;

这样我们主要还是用setTimeout来进行限制&＃xff0c;因为setTimeout可以有效的帮我们延迟触发的时间。

代码&＃xff1a;

window.addEventListener(&＃39;scroll&＃39;,delay(() &＃61;> {console.log(1);app.changeWidth&＃61;(document.body.scrollTop/(document.body.scrollHeight-window.innerHeight))*100},500))function valve(func,time){let timer&＃61;null;const _fun&＃61;function(){clearTimeout(timer);timer &＃61; setTimeout(()&＃61;>{func()}, time)}return _fun;}

在这里我单独做了一个函数&＃xff0c;我们利用了setTimeout和clearTimeout来成功抑制住我们的进度条长度的改变&＃xff0c;这也使得这个进度条在停止的时候才会进行改变。实现的效果还是不错的哈哈&＃xff01;

当然这种延迟的效果的思想应该是更重要的&＃xff0c;我曾今做过一个那个输入框提示的一个小功能&＃xff0c;当这个input输入框里面有内容在输入的时候不会触发&＃xff0c;当这个input输入停止后0.5s,网页会用这个input里面不管输入还是没有输入的内容去请求服务器&＃xff0c;看看是否存在这个用户。或者是一个输入的提示效果

例如这样&＃xff1a;

那我们为什么不做一个可以时间间隔触发的进度条呢&＃xff1f;

效果是这样的&＃xff1a;

代码&＃xff1a;

window.addEventListener(&＃39;scroll&＃39;,valve(() &＃61;> {app.changeWidth&＃61;(document.body.scrollTop/(document.body.scrollHeight-window.innerHeight))*100},1000))function valve(func,time){let timer&＃61;null;const _fun&＃61;function(){if(timer) {}else{clearTimeout(timer);timer &＃61;setTimeout(() &＃61;> {func()}, time);timer&＃61;null;}}return _fun;}

这个进度条的目的是如果鼠标滚轮一直在滚动&＃xff0c;那么他将会做一个阻隔&＃xff0c;是隔一秒钟变化一次。这样的话&＃xff0c;就有效的减少了进度条频繁的变化&＃xff0c;他只是在滚动的途中&＃xff0c;隔着一秒钟去变化一次。
这个思想就是阻隔的思想&＃xff0c;如果一个事件一直在请求服务器&＃xff0c;我就可以限定出它间隔多少秒去请求服务器&＃xff0c;有效的阻隔请去服务器的次数。

上面的两个解决方案和思想也是我们这次进度条深究得出的比较有价值的东西。