理解節流和防抖

時間 2019-11-09

標籤理解節流简体版

原文原文鏈接

在瀏覽器dom事件裏面，一些事件會隨着用戶的操做不間斷的觸發，好比：爲一個元素綁定拖拽事件，爲頁面綁定resize事件（從新調整瀏覽器窗口大小），頁面滾動。若是dom操做比較複雜，還不間斷的觸發事件。這將會形成性能上的損失，致使瀏覽器卡頓,用戶體驗降低。javascript

因此針對此類事件則須要進行節流，或者防抖動處理。css

1、節流-throttle

在指定時間內，讓函數只觸發一次。

規定一個單位時間，在這個單位時間內，只能有一次觸發事件的回調函數執行，若是在同一個單位時間，觸發了屢次的回調函數，那也只有一次能生效，其他的做廢。html

舉例：java

假設，咱們觀察的總時間爲10秒鐘，規定1秒做爲一次事件的最小間隔時間。瀏覽器

若是觸發事件的頻率是 0.5s/次dom

由於控制了最多一秒一次，頻率爲0.5s/次，因此每一秒鐘就有一次事件做廢。最終控制成1s/次函數

實現：post

第一種：採用loadsh庫的_.throttle()函數
第二種：滑動爲例，，咱們滾動頁面時，爲使用節流函數以前，頻繁觸發了屢次的函數調用，函數調用中涉及到了dom操做或者接口請求的話，那將會
進行無數次的函數調用。
採用以後，時間間隔內（這裏設置300ms)屢次觸發了函數，只執行了一次。

<!DOCTYPE html>
<html>
<head>
    <title>節流</title>
    <style type="text/css">
        body{
            height: 4000px;
        }
    </style>
</head>
<body>

    <script type="text/javascript">

        var canRun = true;
        window.onscroll = function(){
                console.log('canRun', canRun);
            if(!canRun) return; // 判斷是否已空閒，若是在執行中，則直接return

            canRun = false;
            setTimeout(function(){
                console.log("函數節流");
                canRun = true;
            }, 300);
        };

    </script>
</body>
</html>

2、防抖-debounce

對於必定 時間段內的連續的函數調用，只執行一次

原理：其實就是一個定時器，當咱們觸發一個事件時，setTimeout讓這個事件延遲一會在執行。若是在這個時間段內又觸發了這個事件。那麼咱們就先clear掉這個定時器，在從新setTimeout一個新定時器來延遲執行。性能

屢次調用之執行一次：spa

一樣這邊的例子是

假設，咱們觀察的總時間爲10秒鐘，規定1秒做爲一次事件的最小間隔時間。

若是觸發事件的頻率是 0.5s/次

由於始終無法等一秒鐘就被再次觸發了，因此最終沒有一次事件是成功的。

實現：

第一種：採用loadsh庫的_.debounce()函數
第二種：滑動爲例，，咱們滾動頁面時，爲使用防抖函數以前，頻繁觸發了屢次的函數調用，函數調用中涉及到了dom操做或者接口請求的話，那將會
進行無數次的函數調用。
採用防抖以後，只有在中止滑動後，定時結束才執行函數處理邏輯。
<!DOCTYPE html>
<html>
<head>
    <title>防抖</title>
    <style type="text/css">
        div{
            height: 4000px;
        }
    </style>
</head>
<body>
    <div></div>

    <script type="text/javascript">
        window.onscroll = function(){
            console.log("scroll滑動");
            throttle(count);
        }

        function count(){
            console.log("函數調用");
        }


        function throttle(method){
            clearTimeout(method.tId);
            method.tId=setTimeout(function(){
                method.call();
            }, 300);
        }

    </script>
</body>
</html>