函数节流和函数防抖

什么是函数节流

        简单来说就是当一个函数的事件可以无限被执行，使用函数节流就能在一个固定的时间内只执行一次，当这个固定的时间过后又能被执行一次；比如设置一秒执行一次，那你在这一秒内执行多次的时候，其实只会执行一次；只有当这一秒过去过后，才能执行下一次；函数节流就像是一个计时器；

代码实现

function throttle(fn) {
    let timer;
    return function (...args) {
        if (timer == null) {
            timer = setTimeout(() => timer = null, 1000)
            return fn.apply(this, args);
        }
    }
}

什么是函数防抖

简单说就是当一个事件被执行之后，在一个固定时间内如果执行多次，但一直没有过这个固定的时间，这种情况下就永远不会执行下一次，只有当这个固定时间过了之后才能执行下一次；函数防抖就像是一个电梯，当有人进入后，但还没有关门，这时又有人进入了，电梯就会重新打开。直到没人进入就开始运行；

代码实现

function debounce(fn) {
    let timer;
    return function (...args) {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            timer = null;
            return fn.apply(this, args)
        }, 1000)
    }
}

为什么要使用函数节流和函数防抖

当一个事件无限被执行，这就会特别消耗性能，而它们的出发点就是为了解决性能消耗太大，内存消耗严重而设计的，算是优化性能的一种方式；