节流和防抖

作用

解决页面卡顿等性能问题

节流函数

一定时间内，某个函数只执行一次。By using throttle function, we don’t allow to our function to execute more than once every X milliseconds.

function throttle (callback, limit) {
    var waiting = false;                      // 一开始，处于非等待状态

    return function () {                      // 返回一个节流函数
        if (!waiting) {                       // 如果没有等待
            callback.apply(this, arguments);  // 执行函数
            waiting = true;                   // 等待置位 true
            setTimeout(function () {          // limit 时间之后
                waiting = false;              // 重新置位 false
            }, limit);
        }
    }
}

callback 函数：哪个函数需要节流？
limit：多长时间之后可以重新调用

也可以基于时间判断来实现：

function throttle(callback, limit) {
    let lastTime = 0;

    return function() {
        let now = new Date();
        if (now - lastTime >= limit) {
            callback();
            lastTime = now;
        }
    }
}

节流应用场景：

滚动加载
表单重复提交
搜索联想功能

防抖

频繁触发时，不执行函数，等最后一次触发延迟一定时间再执行函数，前面的 n 次触发都被忽略掉。（The Debounce technique allow us to “group” multiple sequential calls in a single one.）常用于：防止按钮频繁点击，比如发送验证码的按钮之类的。

const debounce = (callback, delay = 250) => {
    let timeoutId;

    return (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
            timeoutId = null;
            callback(...args);
        })
    }
}

防抖应用场景：

搜索框搜索输入（注意这和上面的搜索联想是不同的）
手机号、邮箱验证检测输入
窗口大小 Resize