一個例子學習防抖、節流

時間 2019-12-10

標籤一個例子學習節流简体版

原文原文鏈接

防抖、節流函數主要是用來限制函數的執行頻次，以優化函數觸發頻率太高致使的響應速度跟不上觸發頻率，出現延遲、假死或卡頓的現象的。

好比我在項目中遇到過輸入查詢的功能，在搜索框中輸入文字調用查詢接口搜索，返回與搜索框匹配的內容。javascript

先來一個基礎的寫法：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <input type="text" class="search" placeholder="搜索...">
    <script type="text/javascript">
        $("body").on("keyup", ".search", function() {  //輸入時調用searchFunc函數
            searchFunc();
        })
    	var searchFunc = function() {
    	    console.log('請求接口返回搜索內容。。。');
    	}
    </script>
</body>
</html>
複製代碼

這是這個搜索功能實現的雛形，可是運行起來會發現，只要我不斷的輸入，它就會不斷地調用searchFunc 方法去請求接口，就是說我輸入10次就會請求10次。這想一想真是很糟糕透了，怎麼優化這個問題呢？html

接下來就要用到防抖思想了。java

防抖函數代碼實現

（用本例解釋）防抖其實就是加上一個定時器，規定它延遲必定的時間再去請求接口。jquery

<!DOCTYPE html>
<html>
<head>
    <title>防抖實現搜索</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <input type="text" class="search" placeholder="搜索...">
    <script type="text/javascript">
        $("body").on("keyup", ".search", function() {
            searchFunc();
	    })
	var timer = null;
	var searchFunc = function() {
	    timer && clearTimeout(timer);
	    timer = setTimeout(function() {
	        console.log('請求接口返回搜索內容。。。');
	    }, 5000);
	}
    </script>
</body>
</html>
複製代碼

加上了定時器以後，再運行看看，它不會再是輸入多少次就請求多少次了。bash

而是延時5秒以後再去作一次請求。函數

須要注意的是：在這個5秒鐘的時間裏，你不斷的輸入，定時器會不斷的被清除再從新設置一個。舉個例子：你第一秒的時候第一次輸入內容，那它開始設置一個定時器而且延時5秒鐘，等到第四秒鐘的時候你再次輸入內容，此時程序是先把你以前設置的定時器先清除再給你從新設置一個新的定時器，這個定時器又延時5秒鐘。也就是說這個定時器以你這5秒鐘時間內最後一次輸入的爲準。優化

這樣就解決了頻繁請求的問題。ui

另外，咱們還可使用函數節流來優化這個問題。spa

節流函數代碼實現

（用本例解釋）給定一個間隔時間，計算一個等待時間，當等待時間大於間隔時間，則再去請求接口code

<!DOCTYPE html>
<html>
<head>
    <title>節流實現搜索</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    <input type="text" class="search" placeholder="搜索...">
    <script type="text/javascript">
        $("body").on("keyup", ".search", function() {
            searchFunc(5000);
        })
        var lastTime = null, nowTime = null;
        var searchFunc = function(gapTime) {
            nowTime = new Date().getTime();
            if(nowTime - lastTime > gapTime || !lastTime) {
                console.log('請求接口返回搜索內容。。。');
                lastTime = nowTime;
            }
        }
    </script>
</body>
</html>
複製代碼