防抖和节流

防抖和节流是性能优化方面常用到的处理手段

防抖

原理

事件相应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间，如果在一定时间没有重复执行就会执行相应函数

应用场景

1. scroll事件滚动触发
2. 搜索框查询
3. 表单验证
4. 按钮提交事件
5. 浏览器缩放 resize事件

案例

在我们实现搜索框查询数据的时候，每次键入都会去频繁请求数据，很多网络资源请求其实都是无意义的，我们可以利用防抖的方式进行处理：

<input type="text" id="inf">
<script>
 var ele = document.querySelector('#inf');
 常规写法
 // ele.oninput = function(){ 
 //   console.log(ele.value);
 // }
防抖写法
 ele.oninput = debounce(function(){
 	// 这里可以做异步请求数据
   console.log(ele.value);
 },200)

 function debounce(fn,wait){
   let timeout;
   return function(){
     let context = this; //获取正确的this指向
     let args = arguments; //获取正确的参数
     clearTimeout(timeout);
     timeout = setTimeout(function(){
       fn.apply(context,args)
     },wait)
   }
 }
</script>

上面案例实现的思路是：在wait时间间隔后去请求对象的数据,如果在这段时间内再次触发事件，那么清除之前的定时器，再次初始化定时器，只有当这段时间之后才会触发事件，这样有效的减少了请求的次数，并且最后也会获取最终正确的数据。

---

节流

原理

如果持续触发事件，每隔一段时间执行一次事件。

与防抖的思路不一样的地方是，防抖只要在时间间隔内再次触发事件，不会触发请求事件，而节流是一定的时间间隔就会触发一次。

实现场景

1. DOM元素的拖拽功能实现
2. 射击游戏 子弹是每隔一段时间就发射的
3. 计算鼠标移动的距离
4. 监听scroll滚动事件

案例

<input type="text" id="inf">
<script>
 var ele = document.querySelector('#inf');
 // ele.oninput = function(){
 //   console.log(ele.value);
 // }
 ele.oninput = throttle(function(){
   console.log(ele.value);
 },1000)

 function throttle(fn,wait){
   let time = 0;
   return function(){
     let context = this;
     let args = arguments;
     let now = +new Date();
     if(now - time > wait){
       time = now;
       fn.apply(context,args);
     }
   }
 }
</script>

上面的案例，只要键入了input的内容，在一段的时间间隔内就会触发一次，触发的时候获取的是当前的input的value值。