函数节流和防抖

前言

浏览器中某些计算和处理要比其他的昂贵很多。例如DOM操作比DOM交互需要更多的时间和cpu时间，为了提升性能，减少DOM操作，于是，函数节流防抖和应运而生，其函数节流的基本思想是指，某些代码不可以在没有间断的情况下连续重复执行。函数防抖的基本思想是指，一个频繁触发的事情只让最后一次执行。下面就让我们来认真了解下这经常使用的函数节流和防抖。

函数节流

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。

下面主要介绍时间戳和定时器两种方式来实现节流函数。

• 时间戳实现函数节流

根据函数节流的原理，我们也可以不依赖 setTimeout实现函数节流。

function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0;
    return function() {
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向问题
            fn.call(this);
        // 同步时间
          lastTime = nowTime;
        }
    }
}

测试代码：

// test
function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) {
    testThrottleFn(e, 'throttle'); // 给节流函数传参
}

其实现原理，通过比对上一次执行时间与本次执行时间的时间差与间隔时间的大小关系，来判断是否执行函数。若时间差大于间隔时间，则立刻执行一次函数。并更新上一次执行时间。

• 定时器实现函数节流

function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，
            throttle触发可以进入计时器
        }, delay)
    }
}

测试代码：

function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 2000); // 节流函数
document.onmousemove = function (e) {
    testThrottleFn(e, 'throttle'); // 给节流函数传参
}

上面例子中，如果我们一直在浏览器中移动鼠标（比如10s），则在这10s内会每隔2s执行一次testThrottle，这就是函数节流。

函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，定时器实现节流函数通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。

函数节流的应用场景

需要间隔一定时间触发回调来控制函数调用频率：

• DOM 元素的拖拽功能实现（mousemove）

• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交

函数防抖

防抖函数：一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

function debounce(fn, delay) {
    var timer = null; 
    return function () {
        var _this = this; // 取debounce执行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向调用debounce的对象，
            相当于_this.fn(args);
        }, delay);
    };
}

测试代码：

function testDebounce(e, content) {
    console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函数
document.onmousemove = function (e) {
    testDebounceFn(e, 'debounce'); // 给防抖函数传参
}

上面例子中的debounce就是防抖函数，在document中鼠标移动的时候，会在onmousemove最后触发的1s后执行回调函数testDebounce；如果我们一直在浏览器中移动鼠标（比如10s），会发现会在10+1s后才会执行testDebounce函数（因为clearTimeout(timer)），这个就是函数防抖。

函数防抖的应用场景

对于连续的事件响应我们只需要执行一次回调：

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）
• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

总结

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，其目的都是，降低回调执行频率，节省计算资源，提高浏览器的性能。

更多优质文章可以访问GitHub博客，欢迎帅哥美女前来Star！！！