js节流与防抖

js节流与防抖

什么是节流，什么是防抖，有什么作用？作用于哪里？

节流：在规定时间内，只执行第一次 （常见用于点击事件，例如小米官网的轮播图切换，无论你左右快速点击多少次，它只会在规定的时间内执行第一次）；
防抖：在规定事件内，只执行最后一次（主要用于键盘事件，例如我们平时打的游戏lol）
节流：

//封装函数写法：
function s(fn,time){
  let start = 0;
  return function(){
    let data = new Date;
    if(data - start>time){
      fn();
      start = data;
    }
  }
}
let fun = s(function(){
  console.log("这里是执行代码")
}，1000);
document.addEventListener('click',fun,false);

//简易写法（推荐）：
let start = 0;
document.addEventListener('click',function(){
	let data = new Date;
  if(data - start>1000){
    fun();
    start = data;
  }
},false)
function fun(){
  console.log("这里是执行函数");
}

---

防抖：

//函数写法：
function fun1(fn,time){
  let start = null;
  return function(){
    clearTimeout(start);
    start = setTimeout(fn,time)
  }
}
let fun = fun1(function(){
  console.log("这里是执行函数");
},1000)
document.addEventListener('click',fun,false);

//简易写法：
let start = null;
document.addEventListener('click',function(){
 clearTimeout(start);
 start = setTimeout(function(){
   console.log("这里是执行代码")
 },1000)
},false);