自己理解的节流和防抖

1，防抖就是一个周期内，如果触发了这个事件，就重新刷新这个周期，直到周期完成时周期内没有触发事件，就输出结果

比如：我设置了一个防抖在一个按钮上，我防抖的周期设置了1秒，当我点击了按钮一下，过1秒，那么我的点击事件就触发，但是，如果我在点击一次之后，我继续猛点了几下，那莫，除最后一下点击后1秒后会触发，其他的点击都是无效的

附上代码：

 <input type="text">
    <script>
        var stabilization = (fn, nowTime) => {
            let timer, context, arg;
            let startTime = 0;
            let run = (outTime) => {
                timer = setTimeout(() => {
                    let now = (new Date()).getTime();
                    let interval = now - startTime;
                    if (interval < outTime) {
                        console.log(nowTime - interval)
                        startTime = now;
                        run(nowTime - interval);
                    } else {
                        fn.apply(context, arg);
                        clearTimeout(timer);
                        timer = null;
                    }
                }, outTime)

            }
            return function() {
                context = this;
                arg = arguments;
                let now = (new Date()).getTime();
                startTime = now;
                if (!timer) {
                    console.log(nowTime)
                    run(nowTime)
                }
            }
        }

        function output() {
            console.log(text.value)
        }
        let text = document.getElementsByTagName('input')[0];
        text.addEventListener('keyup', stabilization(output, 2000));
    </script>

2，节流，就是一个周期会触发一次，这个周期中无论点击多少次，都只会触发一次

比如：我定义了一个点击事件，我配置了一个节流，周期还是1秒，这时我点击了一下按钮，那节流就开始工作，就开始响应，1秒后，我就能拿到点击触发的方法，但是，如果我比较着急，1秒内点击了很多下，那它也只会触发一次，然后周期结束，下次点击周期内，还是只会触发一次

附上代码：

<button>我是按钮</button>
    <script>
        var throttle = (fn, wait) => {
            let context, atg;
            let timer;
            let run = () => {
                timer = setTimeout(() => {
                    fn.apply(context, arg);
                    clearTimeout(timer);
                    timer = null;
                }, wait)
            }
            return function() {
                context = this;
                arg = arguments;
                if (!timer) {
                    run()
                }
            }
        }

        function add() {
            console.log('我是加法');
        }

        let button = document.getElementsByTagName('button')[0];
        button.addEventListener('click', throttle(add, 2000));
    </script>