9、函数节流&防抖

• 函数节流：函数执行一次后，只有大于执行周期之后才会执行第二次（规定时间内只触发第一次生效）

//fn:要截流的函数；delay规定的时间
function throttle(fn,delay){
  //记录上一次触发的时间
  var lastTime = 0;
  return function(){
     var curTime = Date.now();
    if(curTime-lastTime>delay){
      fn.call(this);                    //修正this指向问题
      lastTime = curTime;            //闭包方式保存上次变量值lastTime
    }
  }
}

• 防抖函数：频繁触发的函数，规定时间内，只触发最后一次

function debounce(fn,delay){
  var timer = null;                //记录延时器
  return function(){
      if(timer){clearTimeout(timer)}        //清除上一次延时器
    timer = setTimeout(function(){
        fn.apply(this)
      },delay)
  } 
}

防抖debounce

• 场景：监听一个输入框的文字变化后触发change事件
• 直接用keyup事件会频繁触发change事件
• 防抖：知道用户输入结束或者暂停之后才会触发change事件

function debounce(fn,delay=500){        //debounce是对函数的封装，最糊返回的是一个函数
  var timer = null;
  return function(){
    if (timer){clearTimeout(timer);}
    timer = setTimeout(function(){
      fn.apply(this,arguments);
      timer = null;
    },delay)
  }
}

//使用
input1.addEventListener('keyup',debounce(function(){
    console.log('使用防抖函数：'+this.value)
}),1000)

节流throttle

• 场景：拖拽一个元素时候要随时拿到这个元素的位置
• 如果直接用drag事件那么会频繁触发，十分容易导致卡顿
• 保持一个频率连续触发

function throttle(fn,delay=500){
  let timer = null;
  return function(){
    if(timer){return;}
    setTimeout(()=>{
    fn.apply(this,arguments);            //apply:绑定this，绑定参数
      timer = null; 
    },delay)
  }
}

//使用
div1.addEventListener(throttle(function(e){
  console.log(e.offsetX)
  console.log(e.offsetY)
},100))