搜索请求如何处理（节流），防抖与节流，trottle函数实现

防抖和节流的作用都是防止函数多次调用。防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。
区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况下只会调用一次，而节流的 情况会每隔一定时间（参数wait）调用函数。

• 防抖 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
  运用场景：拍照、下拉触底加载下一页、点击触发的事件中

• 节流 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
  运用场景：搜索框的查询

防抖的两种情况的实现：

1. 当我们触发某个事件的时候，先让函数延时了 wait 时间 在执行函数的内容。
   1).首先，定义一个变量，存放定时器，
   2).判断如果定时器存在，就清除定时器，第一次调用setCount函数定时器是不存在的，所以等待了 wait 时间，执行了一次 fun 函数，当我们一直调用setCount函数时，定时器会一直存在，期间不会执行 fun 函数，直到我们不调用setCount函数，定时器会等待wait时间，才又执行了下一次 fun 函数…

//先防抖后执行
function setCount(fun,wait){
    let timeout; //定义一个变量，存放定时器
    return function(){
	if(timeout) clearTimeout(timeout) //如果定时器存在，就清除定时器，第一执行函数是不存在的，向下继续执行
	  timeout = setTimeout(function() {
		  fun.apply(this)
	  }, wait);
	}
  }
}	

2. 当我们触发某个事件的时候，先执行一次函数，再进行延时，思路和第一种方法的思路差不多，中间加了一个判断，当定时器不存在时，先执行了一次fun方法。
   1). 首先，定义一个变量，存放定时器，
   2). 判断如果定时器存在，就清除定时器，如果不存在就先执行一遍方法，第一次触发setCount函数定时器是不存在的，所以先执行了fun方法，等待了 wait 时间，执行了下一次方法，期间当我们一直触发setCount事件时，定时器一直存在，所以中间不会执行fun方法，直到wait时间后再执行下一次方法

//输出在前  防抖在后
function setCount(fun,wait){
	let timeout;
	return function(){
		if(timeout) clearTimeout(timeout)
		if(!timeout) fun.apply(this)
		timeout = setTimeout(function() {
			fun.apply(this)
		}, wait);
	    }
    }

节流实现的两种方式：

1. 通过 setTimeout()，相当于每隔wait时间执行一次函数，每次触发 setCount 函数的时候 timeout 都是存在的，隔wait时间后 设置 timeout = null，所以就相当于每隔wait时间执行一次。

function setCount(fun,wait){
	let timeout;
	return function(){
		if(!timeout){
			timeout = setTimeout(function(){
				fun.apply(this)
				timeout = null
			},wait)
	      }
	}

2. 首先设置一个初始时间，在返回的函数中定义一个变量获取当前的时间，如果两个值的差大于等待的时间，就让它执行 fun 函数，执行完函数把获取的当前时间的值赋值给初始值，这样就起到了节流的效果，搜索框的搜索功能用这个方法比较多。

  function setCount(fun,wait){
	let oldtime = 0;
	return function(){
		let newtime = new Date()
		if(newtime - oldtime>wait){
			fun.apply(this)
		    oldtime = newtime
		 }
	}
  }