窗口進度條及其高級使用

時間 2019-12-08

標籤窗口進度及其高級使用简体版

原文原文鏈接

咱們大概實現的效果就像YouTube上面的紅色進度條那樣。可是YouTube上面那個進度條仍是很坑爹的。文章後面再告訴大家爲何。html

首先窗口的滾動進度條

窗口的滾動條很是的簡單，只要用 window.onscroll 事件的監聽，就能夠實現。固然我最近在研究Vue.js，因此用vue.js實現了一個。反正都差很少吧，這個沒什麼好說的。vue

<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次，雖然這個鼠標滾輪的時間開銷是不大的，也不用特意去作優化，可是若是是一次滾動咱們觸發了一次服務器請求會怎麼樣？這個結果咱們不敢想象。咱們既然是是去深刻的挖掘它，那咱們就深刻去看看能夠怎麼優化。app

咱們作一個延遲的滾動進度條

功能：在鼠標一直滾動的時候是不會改變進度條的長度，直到鼠標的滾動中止後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;
    }

這個進度條的目的是若是鼠標滾輪一直在滾動，那麼他將會作一個阻隔，是隔一秒鐘變化一次。這樣的話，就有效的減小了進度條頻繁的變化，他只是在滾動的途中，隔着一秒鐘去變化一次。
這個思想就是阻隔的思想，若是一個事件一直在請求服務器，我就能夠限定出它間隔多少秒去請求服務器，有效的阻隔請去服務器的次數。

上面的兩個解決方案和思想也是咱們此次進度條深究得出的比較有價值的東西。