防抖和节流

防抖

• 是为了防止频繁触发的操作，在指定时间内我们让用户的行为只触发一次在第一次点击时/最后一次点击时（只能识别一次）

 function debounce(func, time, isStart) {
    //如果第一个参数不是function 直接提示错误
    if (typeof func !== 'function') throw new TypeError("func must be required and be an function!");
    //如果time不传默认300毫秒
    if (typeof time === 'boolean') {
      isStart == time;
      time = 300;
    }
    //如果time不是number类型也给他一个默认300毫秒
    if (typeof time !== "number") {
      time = 300;
    }
    //如果isStart不传默认false
    if (typeof isStart !== "boolean") isStart = false;

    var timer = null,
        result;

    return function proxy() {
      var self=this,
          param = [].slice.apply(arguments);

      //如果定时器存在，说明是触发行为是在time时间内
      if (timer) {
        //清除定时器，重新设置一个定时器
        clearTimeout(timer);
      }
      //如果isStart为true && 定时器不存在立即执行
      if (isStart && !timer) {
        result = func.apply(self,param)
      }
      timer = setTimeout(function () {
        if(timer){
          clearTimeout(timer);
          timer = null;
        }
        !isStart ? result = func.apply(self,param) : null;
      }, time)
    }
    return result;
  }

调用方法及参数说明：

 let box = document.body.querySelector(".box");
  //直接给box绑定点击事件，如果不做控制，每点击一次都会触发一次func方法
  function func(ev) {
    console.log("OK")
  }
  /*
   *参数：func,time,isStart
   *    func:回调函数，当行为触发要执行的函数
   *    time:间隔时间，在多长时间内认为 点击行为属于频繁触发
   *    isStart:在点击行为第一次触发时执行，还是最后一次点击行为触发时执行  默认false（最后一次）
   */
  box.onclick = hyg.debounce(func, 1000, false)

节流

• 是为了降低触发的频率，能识别多次，在指定时间内多长时间触发一次

function throttle(func, time){
    //如果第一个参数不是function 直接提示错误
    if (typeof func !== 'function') throw new TypeError("func must be required and be an function!");
    //如果time不是number类型给它一个默认300毫秒
    if (typeof time !== "number") time = 300;
    var timer = null,
        createTimerDate=0,//记录创建定时器的时间
        result;
    return function proxy(){

      var nowDate = +new Date,//当前时间
          shortTime =nowDate - createTimerDate,//当前时间-定时器创建时间
          self=this,
          param = [].slice.apply(arguments);//参数处理
      //!timer定时器存在 && shortTime>=time还没到下一次执行的时间
      if(shortTime>=time && !timer){
        timer = setTimeout(function(){
          //触发要执行的函数  重新复制定时器创建时间
          createTimerDate=+new Date();
          if(timer){
            clearTimeout(timer);
            timer = null;
          }
          result = func.apply(self,param);
        },time)
      }

    }

调用方法及参数说明：

//定义滚动条滚动执行的方法
  function func(ev) {
    console.log("OK")
  }
  /*
   *参数：func,time
   *    func:回调函数，当行为触发要执行的函数
   *    time:间隔时间，隔多长时间触发一次
   */
  window.onscroll=throttle(func,300);