摘要：效果優(yōu)化一下因?yàn)檫@里的窗口滾動(dòng)進(jìn)度條沒(méi)有過(guò)度效果嗎雖然谷歌瀏覽器她會(huì)自動(dòng)幫你優(yōu)化一點(diǎn)過(guò)度的效果，但是我們還是自己寫(xiě)的和諧一點(diǎn)點(diǎn)，所以就加多一句的動(dòng)畫(huà)到這里我們的滾動(dòng)進(jìn)度條就基本上實(shí)現(xiàn)了，也可以做一個(gè)很不錯(cuò)的水平效果。

我們大概實(shí)現(xiàn)的效果就像YouTube上面的紅色進(jìn)度條那樣。但是YouTube上面那個(gè)進(jìn)度條還是很坑爹的。文章后面再告訴你們?yōu)槭裁础?/p> 首先窗口的滾動(dòng)進(jìn)度條

窗口的滾動(dòng)條非常的簡(jiǎn)單，只要用 window.onscroll 事件的監(jiān)聽(tīng)，就可以實(shí)現(xiàn)。當(dāng)然我最近在研究Vue.js，所以用vue.js實(shí)現(xiàn)了一個(gè)。反正都差不多吧，這個(gè)沒(méi)什么好說(shuō)的。

    
    
        
        
        
    
    
        

        
{{message}}
    
    
    
    

因?yàn)檫@里的窗口滾動(dòng)進(jìn)度條沒(méi)有過(guò)度效果嗎（雖然谷歌瀏覽器她會(huì)自動(dòng)幫你優(yōu)化一點(diǎn)過(guò)度的效果，但是我們還是自己寫(xiě)的和諧一點(diǎn)點(diǎn)），所以就加多一句CSS3的動(dòng)畫(huà)

transition: width 1s;

到這里我們的滾動(dòng)進(jìn)度條就基本上實(shí)現(xiàn)了，也可以做一個(gè)很不錯(cuò)的水平效果。但是這個(gè)滾動(dòng)還是有很多東西值得我們?nèi)パ芯恳幌碌摹?/p> window.onscroll什么時(shí)候會(huì)觸發(fā)

這里的window.onscroll當(dāng)滾動(dòng)了鼠標(biāo)的滾輪的時(shí)候就會(huì)觸發(fā)對(duì)吧，這個(gè)無(wú)可非議。就算這個(gè)界面我們手抽搐的去滾動(dòng)這個(gè)滾輪，他就一直一直的觸發(fā)
這樣我們?cè)谖覀兊挠|發(fā)代碼里面輸入一個(gè) console.log(1)

我這里指滾動(dòng)了一下，這里就被觸發(fā)了13次，雖然這個(gè)鼠標(biāo)滾輪的時(shí)間開(kāi)銷是不大的，也不用特地去做優(yōu)化，但是如果是一次滾動(dòng)我們觸發(fā)了一次服務(wù)器請(qǐng)求會(huì)怎么樣？這個(gè)結(jié)果我們不敢想象。我們既然是是去深入的挖掘它，那我們就深入去看看可以怎么優(yōu)化。

功能：在鼠標(biāo)一直滾動(dòng)的時(shí)候是不會(huì)改變進(jìn)度條的長(zhǎng)度，直到鼠標(biāo)的滾動(dòng)停止后0.5s之后才開(kāi)始出發(fā)輪動(dòng)條的改變，即你一直在0.5s之內(nèi)滾動(dòng)，進(jìn)度條長(zhǎng)度不會(huì)改變。
在這里我們主要是學(xué)習(xí)這個(gè)方法吧。如果模擬進(jìn)度條的改變是請(qǐng)求服務(wù)器的話，我們就可以有效的去抑制住那些瘋狂請(qǐng)求服務(wù)器的動(dòng)作。

我們要實(shí)現(xiàn)的效果大概是這樣的：

這樣我們主要還是用setTimeout來(lái)進(jìn)行限制，因?yàn)閟etTimeout可以有效的幫我們延遲觸發(fā)的時(shí)間。

代碼：

  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;
    }

在這里我多帶帶做了一個(gè)函數(shù)，我們利用了setTimeout和clearTimeout來(lái)成功抑制住我們的進(jìn)度條長(zhǎng)度的改變，這也使得這個(gè)進(jìn)度條在停止的時(shí)候才會(huì)進(jìn)行改變。實(shí)現(xiàn)的效果還是不錯(cuò)的哈哈！

當(dāng)然這種延遲的效果的思想應(yīng)該是更重要的，我曾今做過(guò)一個(gè)那個(gè)輸入框提示的一個(gè)小功能，當(dāng)這個(gè)input輸入框里面有內(nèi)容在輸入的時(shí)候不會(huì)觸發(fā)，當(dāng)這個(gè)input輸入停止后0.5s,網(wǎng)頁(yè)會(huì)用這個(gè)input里面不管輸入還是沒(méi)有輸入的內(nèi)容去請(qǐng)求服務(wù)器，看看是否存在這個(gè)用戶?；蛘呤且粋€(gè)輸入的提示效果

例如這樣：

效果是這樣的：

代碼：

 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;
    }

這個(gè)進(jìn)度條的目的是如果鼠標(biāo)滾輪一直在滾動(dòng)，那么他將會(huì)做一個(gè)阻隔，是隔一秒鐘變化一次。這樣的話，就有效的減少了進(jìn)度條頻繁的變化，他只是在滾動(dòng)的途中，隔著一秒鐘去變化一次。
這個(gè)思想就是阻隔的思想，如果一個(gè)事件一直在請(qǐng)求服務(wù)器，我就可以限定出它間隔多少秒去請(qǐng)求服務(wù)器，有效的阻隔請(qǐng)去服務(wù)器的次數(shù)。

上面的兩個(gè)解決方案和思想也是我們這次進(jìn)度條深究得出的比較有價(jià)值的東西。

其實(shí)在文章的開(kāi)頭我們就有提到，YouTube上面的紅色進(jìn)度條，這個(gè)進(jìn)度條為什么坑爹呢！因?yàn)樗羌俚摹?br>我們每次打開(kāi)加載視頻的時(shí)候，他是不是都會(huì)卡一下？見(jiàn)圖。

可能大多數(shù)人都以為它加載的時(shí)候卡了一下吧。其實(shí)是假的！假的！ 他只是故意營(yíng)造出一個(gè)斷斷續(xù)續(xù)加載的效果讓大家看的舒服一點(diǎn)而已。

你可以論證一下。你把網(wǎng)斷了，你再點(diǎn)視頻，發(fā)現(xiàn)他還是有這個(gè)紅色的條子，只是到一般就停了變成了無(wú)網(wǎng)絡(luò)的界面而已。

要是再不信你可以用谷歌瀏覽器測(cè)試下？哈哈！

這里用到就是那個(gè)間隔變化的滾動(dòng)條，可以自己實(shí)現(xiàn)一個(gè)去模擬Youtube上面的效果哦！