搞懂防抖和节流还有闭包 ，ts实现如下

函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

正常情况实现：触发onmousemove事件，显示当前鼠标的坐标，实现如下图：

 

1、函数防抖(debounce)

• 实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时调用方法
• 缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

  //简单的防抖函数
  export function debounce(fun: Function, delay: number) {
      let timer: any;
      return function () {
          var args = arguments;
          if (timer) {
              clearTimeout(timer);
          }
          timer = setTimeout(() => {
              fun.apply(this, args);
          }, delay);
      }
  }
  

  　　

  2、函数节流(throttle)

  • 实现方式：每次触发事件时，如果当前有等待执行的延时函数，则直接return

  • //简单的节流函数
    export function throttle(fun: Function, delay: number) {
        let timer: any;
        return function () {
            var args = arguments;
            if (!timer) {
                timer = setTimeout(() => {
                    fun.apply(this, args);
                    clearTimeout(timer);
                    timer = null;
                }, delay);
            }
        }
    }