函数节流和函数防抖

在前端开发中一部分的用户行为会频繁的触发事件执行，对DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数防抖(debounce)和函数节流(throttle)就是为了解决类似的需求应运而生的。

函数防抖

在事件被触发n秒后在执行回调，如果在这n秒内又被触发，则重新计时。
常见应用场景： 搜索框搜索、窗口大小Resize。

根据函数防抖思路设计第一版简单的防抖代码：

var timer; // 维护同一个timer
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function(){
        fn();
    }, delay);
}

用onmousemove测试一下防抖函数：

function testDebounce() {
    console.log('test');
}
document.onmousemove = () => {
  debounce(testDebounce, 1000);
}

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

在上面的代码中，会出现一个问题，var timer只能在setTimeout的父级作用域中，这样才是同一个timer，并且为了方便防抖函数的调用和回调函数fn的传参问题，我们应该用闭包来解决这些问题。

优化后的代码

function debounce(fn, delay){
        var timer;
        return function () {
            var _this = this; // 取debounce当前执行环境的this;
            var args = arguments;
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(function () {
                fn.apply(_this, args)
            }, delay)
        }
    }

function fn(args){
        console.log(args)
}

var debounceTest = debounce(fn, 1000)

var input = document.getElementById("input");
input.oninput = function(){
        debounceTest ('test')
}

使用闭包后，解决传参和封装防抖函数的问题，这样就可以在其他地方随便将需要防抖的函数传入debounce了

函数节流

每隔一段时间，只执行一次函数
应用场景： 滚动加载，加载更多或滚到底部监听、重复点击提交按钮等

1. 定时器实现节流函数：

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

上面例子中，如果我们一直在浏览器中移动鼠标（比如10s），则在这10s内会每隔1s执行一次testThrottle，这就是函数节流
函数节流的目的，是为了限制函数一段时间内只能执行一次。因此，定时器实现节流函数通过使用定时任务，延时方法执行。在延时的时间内，方法若被触发，则直接退出方法。从而，实现函数一段时间内只执行一次
2.使用时间戳方式实现：

function throttle (fn, delay) {
  // 利用闭包保存时间
  let prev = Date.now()
  return function () {
    let _this= this
    let arg = arguments
    let now = Date.now()
    if (now - prev >= delay) {
      fn.apply(_this, arg)
      prev = Date.now()
    }
  }
}

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

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

总结：

相同点：

• 都可以通过使用 setTimeout 实现。
• 目的都是，降低回调执行频率。节省计算资源。

不同点：

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