防抖和节流

防抖(debounce):

函数防抖一般是指对于在事件被触发n秒后再执行的回调，如果在这n秒内又重新被触发，则重新开始计时。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    用户名: <input onblur="checkUsername" placeholder="请输入用户名" id="username" />

    <script>
        var timer;
        var count = 0;
        var $username = document.getElementById('username');
        $username.addEventListener('input', function () {
            console.log(++count);
            // 每次输入就清除定时器,一直输入就一直清除,下面的console.log就永远不会触发,
            // 直到你不输入一秒后才触发 
            clearTimeout(timer);
            timer = setTimeout(function () {
                console.log('发请求到后台,检查用户是否已注册');
            }, 1000)
        }, false)
    </script>
</body>

// 上面例子中的函数,一般单独写出来,给它命名为debounce
var timer;
var count = 0;
var $username = document.getElementById("username");
$username.addEventListener("input", debounce, false);

function debounce() {
  console.log(++count);
  clearTimeout(timer);
  timer = setTimeout(function() {
    console.log("发请求到后台,检查用户是否已注册");
  }, 1000);
}

使用场景：当你在页面中使用 onkeyUp 监听用户在 input 框中的输入，如果用户按住一个 6 不放，那监听事件岂不是一直被触发，这样就浪费了一部分性能了，那么我们在一定事件内监听，也就是说我过了一秒再来看看你输入了多少个 6

节流（throttle）：

函数节流就是函数每隔n秒执行一次

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    用户名: <input placeholder="请输入用户名" id="username" />

    <script>
        var timer;
        var count = 0;

        var $username = document.getElementById('username');
        $username.addEventListener('input', throttle(function () {
            console.log(++count);
        }), false)

        function throttle(callback) {
            // 上一次点击的时间
            let preTime = Date.now();
            return function () {
                let args = arguments;
                // 现在点击时间
                let now = Date.now();
                // 现在点击的时间跟上一次点击的时间如果超过了一秒,执行回调
                if (now - preTime >= 1000) {
                    callback(args);
                    // 从新计时,这次点击的时间成为下一次点击时间的起点
                    preTime = now;
                }
            }
        }
    </script>
</body>

函数防抖和节流区别在于

函数防抖的情况下，函数将一直推迟执行，造成不会被执行的效果；
函数节流的情况下，函数将每隔 n 秒执行一次

如果想容易理解

节流防抖就好比乘电梯，比如delay(等待)是10秒，那么防抖就是电梯每进来一个人就要等10秒再运行，而节流就是电梯保证每10秒可以运行一次
它和防抖动最大的区别就是，节流函数不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

最后编辑于：2019.11.26 19:33:29