視窗進度條及其高階使用

我們大概實現的效果就像youtube上面的紅色進度條那樣。但是youtube上面那個進度條還是很坑爹的。文章後面再告訴你們為什麼。

視窗的滾動條非常的簡單，只要用window.onscroll事件的監聽，就可以實現。當然我最近在研究vue.js，所以用vue.js實現了乙個。反正都差不多吧，這個沒什麼好說的。

因為這裡的視窗滾動進度條沒有過度效果嗎（雖然谷歌瀏覽器她會自動幫你優化一點過度的效果，但是我們還是自己寫的和諧一點點），所以就加多一句css3的動畫

到這裡我們的滾動進度條就基本上實現了，也可以做乙個很不錯的水平效果。但是這個滾動還是有很多東西值得我們去研究一下的。

這裡的window.onscroll當滾動了滑鼠的滾輪的時候就會觸發對吧，這個無可非議。就算這個介面我們手抽搐的去滾動這個滾輪，他就一直一直的觸發

這樣我們在我們的觸發**裡面輸入乙個console.log(1)

我這裡指滾動了一下，這裡就被觸發了13次，雖然這個滑鼠滾輪的時間開銷是不大的，也不用特地去做優化，但是如果是一次滾動我們觸發了一次伺服器請求會怎麼樣？這個結果我們不敢想象。我們既然是是去深入的挖掘它，那我們就深入去看看可以怎麼優化。

功能：在滑鼠一直滾動的時候是不會改變進度條的長度，直到滑鼠的滾動停止後0.5s之後才開始出**動條的改變，即你一直在0.5s之內滾動，進度條長度不會改變。

在這裡我們主要是學習這個方法吧。如果模擬進度條的改變是請求伺服器的話，我們就可以有效的去抑制住那些瘋狂請求伺服器的動作。

我們要實現的效果大概是這樣的：

這樣我們主要還是用settimeout來進行限制，因為settimeout可以有效的幫我們延遲觸發的時間。

**：

window.addeventlistener('scroll',delay(() => ,500))
function valve(func,time), time)
}return _fun;
}

在這裡我單獨做了乙個函式，我們利用了settimeout和cleartimeout來成功抑制住我們的進度條長度的改變，這也使得這個進度條在停止的時候才會進行改變。實現的效果還是不錯的哈哈！

當然這種延遲的效果的思想應該是更重要的，我曾今做過乙個那個輸入框提示的乙個小功能，當這個input輸入框裡面有內容在輸入的時候不會觸發，當這個input輸入停止後0.5s,網頁會用這個input裡面不管輸入還是沒有輸入的內容去請求伺服器，看看是否存在這個使用者。或者是乙個輸入的提示效果

例如這樣：

效果是這樣的：

}這個進度條的目的是如果滑鼠滾輪一直在滾動，那麼他將會做乙個阻隔，是隔一秒鐘變化一次。這樣的話，就有效的減少了進度條頻繁的變化，他只是在滾動的途中，隔著一秒鐘去變化一次。

這個思想就是阻隔的思想，如果乙個事件一直在請求伺服器，我就可以限定出它間隔多少秒去請求伺服器，有效的阻隔請去伺服器的次數。

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

可能大多數人都以為它載入的時候卡了一下吧。其實是假的！假的！他只是故意營造出乙個斷斷續續載入的效果讓大家看的舒服一點而已。

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

這裡用到就是那個間隔變化的滾動條，可以自己實現乙個去模擬youtube上面的效果哦！