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>