关于防抖和节流的三两理解

前端开发其实必不可少的就是性能方面的优化了，合理的优化不仅加快了网络访问速度，同时也减少了系统内存的开销，然而不是每个人都能去大公司工作的，而有些小公司只会追求进度，对于性能方面难免不那么看中，至少在程序能够快速开发并且不崩溃的情况下，老板也不会让你再做什么优化了，让你做其他事缓解下开销岂不美滋滋？

但是这并不意味着我们不需要了解，毕竟这也是个有趣的方向，不是么？长话短说，let's go!

谈到js性能优化，防抖和节流就跃然脑海中了，那么防抖做了什么？节流又做了什么？

防抖：个人参考了许多人的解释，最终还是从字面意义上解释，防止抖动，为什么？

一般而言，防抖用于输入框的设计中，为了减少http的请求而出现（个人不太懂为什么），当我们不断输入多个字符时，实际上输入框内置的方法在不断监听输入的变化，并反馈而出，这样你就能形象的感觉到数据不断在抖动了，因此我这样解释

而防抖所做的也很简单：规定时间内，一切操作都在不断重置，直到规定时间结束前，执行最新的操作，换言之，就是N秒不管你点了几次，输入了几次，我只看最后那个操作：

function debounce(fn, time) {
    let timer = null;
    return function() {
        let args = arguments;
        if(timer) {
            clearTimeout(timer);
        }
        // 原理即是不断销毁异步事件，达到指定时间内刷新事件操作
        timer = setTimeout(() => {
             fn.apply(null, args);
        }, time);
    }
}

那节流呢？

有人说是在滚动时这样做，其实我个人感觉，只要满足一个条件：只要你觉得在某个时间内，某个操作只需要执行一次就ok了，那么使用它就绝对没错了，个人感觉使用场景应该是挺多的

看代码：

function throttle(fn, delay) {
    let init = Date.now();
    return function() {
        let args = arguments;
        let now = Date.now();
        if(now - init > delay) {
            fn.apply(this, args);
            // 重置初始化时间为当前时间，表明当前已实现了
            // 操作，因此下次再执行的时候就需要以当前时间判断为基准了
            init = now;
        }
    }
}

两者的区别其实也挺好区分的

防抖：N秒只执行最新的操作

节流：N秒只执行第一次操作

具体使用场景还是需要多多琢磨的，虽然代码不难，但是要运用的好需要下功夫，以上只是粗浅的理解，使用还需实践！！！