js 函數節流throttle 函數去抖debounce

時間 2019-12-18

標籤函數節流 throttle debounce 欄目 JavaScript 简体版

原文原文鏈接

一、函數節流throttlejavascript

通俗解釋：css

假設你正在乘電梯上樓，當電梯門關閉以前發現有人也要乘電梯，禮貌起見，你會按下開門開關，而後等他進電梯；可是，你是個沒耐心的人，你最多隻會等待電梯停留一分鐘； 在這一分鐘內，你會開門讓別人進來，可是過了一分鐘以後，你就會關門，讓電梯上樓。html

因此throttle的做用是，預先設定一個執行週期，當調用動做的時刻大於等於執行週期則執行該動做，而後進入下一個新的時間週期。java

應用：在指定時間，事件最多觸發一次。app

上述例子改成地鐵更合適。函數

二、函數去抖debounceui

假設你正在乘電梯上樓，當電梯門關閉以前發現有人也要乘電梯，禮貌起見，你會按下開門開關，而後等他進電梯； 若是在電梯門關閉以前，又有人來了，你會繼續開門； 這樣一直進行下去，你可能須要等待幾分鐘，最終沒人進電梯了，纔會關閉電梯門，而後上樓。this

因此debounce的做用是，當調用動做觸發一段時間後，纔會執行該動做，若在這段時間間隔內又調用此動做則將從新計算時間間隔。spa

應用：百度首頁的搜索按鈕。code

三、函數節流與函數去抖實現

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>函數節流與函數去抖</title>
    </head>

    <body>
        <button type='button' id="btn">函數節流</button>
        <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
        <script type="text/javascript"> const btn = document.getElementById('btn'); //函數去抖
            function debounce(fn, delay) { var timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => fn.apply(this, args), delay); } } //函數節流
            function throttle(fn, wait) { var timer; return function(...args) { if(!timer) { timer = setTimeout(() => timer = null, wait); return fn.apply(this, args); } } } btn.onclick = debounce(function() { console.log("clicked"); }, 300); //按鈕每500ms一次點擊有效
            btn.onclick = throttle(function() { console.log("button clicked"); }, 500); </script>
    </body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。