窗口進度條及其高級使用

objc94 發布于2019-08-22 10:48 / 1242人閱讀

摘要：效果優化一下因為這里的窗口滾動進度條沒有過度效果嗎雖然谷歌瀏覽器她會自動幫你優化一點過度的效果，但是我們還是自己寫的和諧一點點，所以就加多一句的動畫到這里我們的滾動進度條就基本上實現了，也可以做一個很不錯的水平效果。

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

首先窗口的滾動進度條

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

    
    
        
        Bar
        
    
    
        
        {{message}}

效果

優化一下

因為這里的窗口滾動進度條沒有過度效果嗎（雖然谷歌瀏覽器她會自動幫你優化一點過度的效果，但是我們還是自己寫的和諧一點點），所以就加多一句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;
    }

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

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

那我們還可以做什么進度條呢？

其實在文章的開頭我們就有提到，YouTube上面的紅色進度條，這個進度條為什么坑爹呢！因為他是假的。
我們每次打開加載視頻的時候，他是不是都會卡一下？見圖。

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

你可以論證一下。你把網斷了，你再點視頻，發現他還是有這個紅色的條子，只是到一般就停了變成了無網絡的界面而已。

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

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

GPU云服務器云服務器進度條上傳進度條網站進度條帶進度條

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91295.html

Spark Streaming學習筆記

摘要：輸入和接收器輸入代表從某種流式數據源流入的數據流。文件數據流可以從任何兼容包括等的文件系統，創建方式如下將監視該目錄，并處理該目錄下任何新建的文件目前還不支持嵌套目錄。會被一個個依次推入隊列，而則會依次以數據流形式處理這些的數據。特點： Spark Streaming能夠實現對實時數據流的流式處理，并具有很好的可擴展性、高吞吐量和容錯性。 Spark Streaming支持從多種數...

陸斌 2019-08-15 10:38 評論0 收藏0
JavaScript 編程精解中文第三版十五、處理事件

摘要：事件與節點每個瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數作為對象傳遞事件對象。若事件處理器不希望執行默認行為通常是因為已經處理了該事件，會調用事件對象的方法。來源：ApacheCN『JavaScript 編程精解中文第三版』翻譯項目原文：Handling Events 譯者：飛龍協議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯部分...

Clect 2019-08-23 18:19 評論0 收藏0
PocketLibs（3）—— 進度條 NProgress

摘要：可以指定一個具體值，而非增量，在之間。這是因為，使進度增加超過時，會變成，之后又從重新開始。所以，當為時，我們停止調用。依賴jQuery。 import nprogress from nprogress import nprogress/nprogress.css $(#btn-loading).on(click, function () { nprogress.start...

crossoverJie 2019-08-22 16:02 評論0 收藏0