js 函数节流防抖

     函数节流(throttle) 、函数防抖(debounce) 主要是为了防止用户频繁进行操作。以避免事件触发太频繁，浏览器来不及处理，导致页面出现卡顿等负面影响。

函数节流

        函数节流是指预先定义一个函数，使其在一定周期内无论触发多少次都只执行一次。

        下面是一个封装好的函数，用来给函数进行节流，handler函数为要节流的函数，wait为函数触发的间隙时间 1000为1s。

function throttle(handler, wait) {
            var lastTime = 0;
            return function A() {
                var nowTime = +new Date();
                // 当前时间 - 上一次点击的时间 >= wait值
                if (nowTime - lastTime >= wait) {
                    // 执行功能
                    handler()
                    // 给lastTime重新赋值为当前时间
                    lastTime = nowTime;
                }
            }
      }

             在对函数进行节流后，函数只有在上一次触发后 经过了wait值的时间才能进行下一次运行。

函数防抖

        函数防抖是指在一定的周期内某函数无论触发多少次 ，都只触发最后一次。

        下面是封装好的防抖函数。

        

 function debounce(handle, delay) {
            // 请实现功能
            var timer = null;
            return function A() {
                // 1.清除上一次的定时器
                clearTimeout(timer);
                // 2.保存当前的this
                var that = this;
                timer = setTimeout(function () {
                    // 改变handle的this指向为that
                    handle.call(that);

                }, delay)
            }
        }

        函数在触发后，只有在经过delay时间后才会运行，期间如果对其进行重复触发，则delay时间也重新开始计算。

---

        函数防抖和函数节流的区别主要在于事件触发的时机，节流是先触发运行函数然后经过一定时间才能下一次触发运行，防抖则是触发后经过一段时间运行函数，如果在期间重复触发则运行函数delay的时间值就重新计算。

        如有不对，欢迎指正～～