JavaScript 手写---防抖和节流

1、防抖

什么是防抖?
防抖就是当用户触发一个事件，这个事件并不会立即执行，会在等待n秒以后才执行，在这个等待期内，用户如果再次触发，则会重新计时，等待n秒以后在执行。简单来说：你在等待期内多次触发事件，这个事件不会执行，只会执行最后一次事件触发（联想王者荣耀 回城 ）

 <script>
        /**
         * @fn         事件回调函数
         * @delay      等待时间  （单位：毫秒）
        */
        function _debounce(fn, delay) {
            let timer = null;
            //此处不知道是否传参数，以及传多少参数，所以使用剩余参数
            return function (...args) {
                //利用 && 的短路运算
                timer && clearTimeout(timer)
                timer = setTimeout(() => {
                    //显式绑定this指向，传入数组
                    fn.apply(this, args)
                }, delay)
            }
        }
    </script>

2、节流

什么是节流？
n秒内只执行一次事件触发，点击多次都不会再次触发，只有过了n秒，才会再次执行事件触发，简单来说：就是n秒内只执行一次事件触发；
联想（王者荣耀的英雄技能）

 <script>
        /**
         * @fn         事件回调函数
         * @delay      等待时间  （单位：毫秒）
        */
        function _throttle(fn, delay) {
            //定义一个默认开始时间
            let defaultTimer = 0;
            return function (...args) {
                //定义回调执行时间
                let startTime = Date.now();
                //如果回调执行时间没有超过delay，则不执行回调函数，超过了则执行事件
                if (startTime - defaultTimer > delay) {
                    fn.apply(this, args)
                    //将回调执行时间赋值默认时间，等待下一次事件触发的startTime
                    defaultTimer = startTime
                }
            }

        }
    </script>