函数节流&防抖

Posted 2021-06-06 Smile沛沛

防抖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))