js的防抖和节流的封装

 防抖（debounce)

• 防抖：在规定的事件内触发一次，开启一个定时器，延迟某个时间执行(500ms),如果在这500ms内，有再次触发事件，重新计数

• 防抖的目的：让高频发的事件，在规定时间内，触发1次

• 实现思路： 开一个定时器，事件延迟某个时间（30ms），如果在这30ms内再次触发整个事件，重新开始计数

• 基础实现

  
  防抖：事件发生的时候开启定时器，开始计数(30)，如果在计数范围内又触发了事件，那就重新开始计数
  var timer;
  function change() {
      //判断，如果之前已经开启了定时器，就清除掉之前的
      if (timer) { clearTimeout(timer) }
      timer = setTimeout(function () {
          fun();
      }, 30);
  }

• 封装

  function debounce(fun,wait) { //fun:事件处理函数， wait:延迟时间
      var timer; //维护全局纯净，借助闭包来实现
      return function () {
          if (timer) {  //timer有值为真，这个事件已经触发了一次，重新开始计数
              clearTimeout(timer); 
          }
          timer = setTimeout(function () {
              fun();
          }, wait);
      }
  }

节流

• 防抖和节流的区别

  • 防抖：高频率触发事件，只执行一次

  • 节流：高频率触发事件，按一定的频率执行，隔一会执行一次

  • 封装

  • function throttle(fun, wait) {
        var timer;  //开   timer=undefined
        return function () {
            if (!timer) { //判断timer是否有值（当前是否已经开启了定时器） ，
                timer = setTimeout(function () { //关
                    fun();
                    timer = undefined; //开
                }, wait)
            }
        }     
    }