函数防抖和函数节流

一个方便理解正常情况、函数防抖、函数节流情况的可视化工具：
正常情况、函数防抖、函数节流情况可视化工具

1、概念

（1）函数防抖（debounce）：事件被触发n秒后再执行回调，并且在n秒内只能执行一次，如果n秒内又被触发，则重新计时。换句话说就是当一个动作被连续触发，则只之行最后一次。比如坐公交时，司机需要等最后一个人上车才能关门，每次上一个人，司机就会多等待几秒再关门。

（2）函数节流（throttle）：限制一个函数在一定时间内执行一次

2、作用

优化高频率行JS代码的一种方法，JS中的一些事件如浏览器的resize、scroll，鼠标的mousemove、mouseover，input输入框的keypress等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制。

3、应用场景

（1）函数防抖——连续的事件，只需触发一次回调的场景有：
A. 搜索框搜索输入，只需要最后一次输入完再发送请求
B. 手机号、邮箱验证
C. 窗口大小Resize，只需窗口调整完成后计算窗口大小，防止重复渲染

（2）函数节流——间隔一段时间执行一次回调的场景有：
A. 滚动加载，加载更多或滚到底部监听
B. 谷歌搜素框，搜素联想功能
C. 高频率点击提交，表单重复提交

4、实现

（1）函数防抖：函数防抖在执行目标方法时，会等待一段时间。当又执行相同方法时，若前一个定时任务未执行完，则 clear 掉定时任务，重新定时。如：

const debounce = (func, wait) => {
    let timer;
    return () => {
        clearTimeout(timer);
        timer = setTimeout(func, wait);
    };
};

（2）函数防抖，如：

//定义方法即要做的事情
function fun(){
    console.log('onresize')
}
//定义事件触发要执行的方法，两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce(fn,delay){
    //定义一个变量作为等会清除对象
    var handle;
    //这里用到了闭包，一个函数里面return另一个函数，变量相互签引导致垃圾回收机制不会销毁handle变量
    return function(){
        //在这里一定要清除前面的定时器，然后创建一个新的定时器
        clearTimeout(handle) 
        //最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发（这里的变量赋值是跟定时器建立连接，进行地址赋值，一定要重新赋值给handle  
        handle=setTimeout(function(){
            fn()
        },delay)
    }
}
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 1000));

（3）函数防抖，如：

function debounce(fn, delay) {
    var timer; // 维护一个 timer
    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);
    };
}
    
// test
function testDebounce(e, content) {
    console.log(e, content);
}
var testDebounceFn = debounce(testDebounce, 1000); // 防抖函数
document.onmousemove = function (e) {
    testDebounceFn(e, 'debounce'); // 给防抖函数传参
}

（4）函数节流（定是函数setTimeout版）：通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次。如：

const throttle = (func, wait) => {
    let timer;
    return () => {
        if (timer) {
            return;
        }

        timer = setTimeout(() => {
            func();
            timer = null;
        }, wait);
    };
};

（5）函数节流（时间戳版）：通过对比上一次执行时间与本次执行时间的时间差与间隔时间的大小关系，来判断是否执行函数。若时间差大于间隔时间，则立刻执行一次函数。并更新上一次执行时间。如：

const throttle = (func, wait) => {
    let last = 0;
    return () => {
        const current_time = +new Date();
        if (current_time - last > wait) {
            func.apply(this, arguments);
            last = +new Date();
        }
    };
};

（6）函数节流，如：

//首先定义一个全局变量
var canRun = true;
//当浏览器窗口大小发生变化也就是重新计算窗口大小的时候触发
window.onresize = function(){
    //  取反，canRun为false的情况下
    if(!canRun){
        //直接return，后面的代码不执行
        return
    }
    //走到这来就是canRun为true的情况，然后进行赋值为false
    canRun = false

    //设置一个定时器进行轮询操作
    setTimeout( function () {
        //这是要做的事情
        //最后记得重新赋值true继续让他取反
        canRun = true
        //每隔1000毫秒也就是1秒钟就执行一次
    }, 1000)
}

（7）函数节流，如：

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)
    }
}
    
//test  
function testThrottle(e, content) {
    console.log(e, content);
}
var testThrottleFn = throttle(testThrottle, 1000); // 节流函数
document.onmousemove = function (e) {
    testThrottleFn(e, 'throttle'); // 给节流函数传参
}

5、异同点比较

（1）相同点
A. 都可以通过setTimeout实现
B. 目的都是降低回调执行频率，节省计算资源

（2）不同点
A. 函数防抖在一段连续操作结束后处理回调，利用clearTimeout和setTimeout实现；函数节流在一段连续操作中，每一段时间只执行一次，在频率较高的事件中使用来提高性能
B. 函数防抖关注一定时间内连续触发，只在最后执行一次，而函数节流侧重于一段时间内只执行一次