防抖和节流

防抖

防止频繁的点击，设置一个定时器，每次点击清空计时，当计时结束后回调点击事件。是为了短时间多次点击只作用一次，不至于多次请求而使服务器负担加重。

function antiShake(fn){
	var timer = null;
  return function(){
		clearTimeout(timer);//点击后立即清空计时，重新计时
    timer = setTimeout(()=>{
      fn.call(this);//绑定回调函数的作用域
    	console.log('start record');
    },1000)//定时1s
  }
}
function click(){
	console.log("click!");
}//点击事件

var btn = document.getElementById('button');//获取button
btn.addEventListener('button',antiShake(click));

节流

触发点击事件后设定一个计时器，当计时存在时该点击会直接返回空数据，定时结束后即可回调函数。目的在于控制每段时间只执行一次点击事件。

function throttle(fn){
	var timer = null;
  var click = true;
  return function(){
  	if(!click) return;
    else{
      click = false;
    	timer.setTimeout(()=>{
      	fn.call(this);
      },1000)	
    }
  }
}
function get(){
	console.log("hello,mayuri");
}
var btn = document.getElementById('button');
btn.addEventListener('button',throttle(get));