转载

窗口进度条及其高级使用

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

首先窗口的滚动进度条

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

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Bar</title>
        <style>
            #bar{
                position: fixed;
                height: 5px;
                background-color: aqua;
            }
        </style>
    </head>
    <body id="app">
        <div id="bar" v-bind:style="{width:changeWidth+'%'}"></div>
        <div v-for="n in 1000">{{message}}</div>
    <script src="./vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'This is a Vue bar!',
                changeWidth:0
            }
        })
    
        window.addEventListener('scroll',() => {
            app.changeWidth=(document.body.scrollTop/(document.body.scrollHeight-window.innerHeight))*100
        })
    
    </script>
    </body>
    </html>

效果

窗口进度条及其高级使用

优化一下

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

transition: width 1s;

窗口进度条及其高级使用

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

window.onscroll什么时候会触发

这里的window.onscroll当滚动了鼠标的滚轮的时候就会触发对吧，这个无可非议。就算这个界面我们手抽搐的去滚动这个滚轮，他就一直一直的触发

这样我们在我们的触发代码里面输入一个 console.log(1)

窗口进度条及其高级使用

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

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

功能：在鼠标一直滚动的时候是不会改变进度条的长度，直到鼠标的滚动停止后0.5s之后才开始出发轮动条的改变，即你一直在0.5s之内滚动，进度条长度不会改变。

在这里我们主要是学习这个方法吧。如果模拟进度条的改变是请求服务器的话，我们就可以有效的去抑制住那些疯狂请求服务器的动作。

我们要实现的效果大概是这样的：

窗口进度条及其高级使用

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

代码：

window.addEventListener('scroll',delay(() => {
        console.log(1);
        app.changeWidth=(document.body.scrollTop/(document.body.scrollHeight-window.innerHeight))*100
    },500))

     function valve(func,time){
        let timer=null;
        const _fun=function(){
                clearTimeout(timer);
                timer = setTimeout(()=>{func()}, time)
        }
        return _fun;
    }

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

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

例如这样：

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

效果是这样的：

代码：

window.addEventListener('scroll',valve(() => {
        app.changeWidth=(document.body.scrollTop/(document.body.scrollHeight-window.innerHeight))*100
    },1000))

    function valve(func,time){
        let timer=null;
        const _fun=function(){
                if(timer) {

                }else{
                    clearTimeout(timer);
                    timer =setTimeout(() => {func()}, time);
                    timer=null;
                }
        }
        return _fun;
    }

这个进度条的目的是如果鼠标滚轮一直在滚动，那么他将会做一个阻隔，是隔一秒钟变化一次。这样的话，就有效的减少了进度条频繁的变化，他只是在滚动的途中，隔着一秒钟去变化一次。

这个思想就是阻隔的思想，如果一个事件一直在请求服务器，我就可以限定出它间隔多少秒去请求服务器，有效的阻隔请去服务器的次数。