函数的防抖和节流

前言：由于在开发过程中避免会遇上连续按多次按钮，导致客户端一直不断的请求服务端，这会造成服务端请求不上的情况，从而导致BUG。那么采取防抖和节流的办法，可以减少请求次数，从按钮连按上千次请求上白次，变成连按上百次但是只请求一次。包括页面的拖拽等等。主要目的是可以优化页面的性能

防抖

1.原理：事件相应函数在一段时间才会执行，如果在这段时间内再次调用，则重新计算执行时间（在300毫秒内，就会重新计算）。当超过300毫秒时没有再次调用该函数，就执行doSomeThing,300。
这个的意思是，当鼠标进行滑动事件小于300毫秒时，不会执行doSomeThing函数，但是如果鼠标不的时间大于300毫秒时，就会执行doSomeThing函数。

2.演示时间是如何频繁发生的 先引入underscore库

运行结果：
鼠标移动到指定区域，打印的数值不断地在增大。
说明：
意味着做了很大数值的运算，执行函数了很大的数值，可能做了上百次的回调甚至aiax请求。但是这样不断的请求，会导致数据阻塞，页面渲染不出来，用户体验感不好

3.防止不断地调用函数进行回调：
加入：_.debounce（执行的函数，多少秒后执行的函数，是否立即执行） 防抖函数
代码：

运行结果：在相应的模块中进行滑动时，数值不会改变，等鼠标不进行移动时，就会请求回调一次。

因每次执行函数都要调用库，并且库里面还有些其他的方法，引入库来说对项目的体积压力来说增大了不少。因此要做的是选择库中的debounce方法进行封装，每次都可只调用debounce方法即可。

4.对代码进行优化
第一步操作： 实现自己的debounce

5.第二步操作：
this的指向问题
需要让自己建立函数中的this指向当前的container

让执行函数内部的this指向container

7.第三步操作：修复event指向问题

8.第四步操作:立即执行

9.第五步操作：取消防抖

10.取消防抖

使用场景：
scoll事件滚动
搜索框输入查询
表单验证
按钮提交事件
浏览器的窗口缩放，resize事件

## 节流
1.原理：
如果持续触发事件，每隔一段时间，他只执行一次
2.使用的方法
throttle
3.第一步操作：

执行结果：
鼠标滑动区域，每隔两秒执行一次操作
缺点： 当鼠标刚触碰都区域里，直接立即执行函数；当鼠标在区域内不进行移动时，函数会在执行一遍并打印出结果
4.使用时间戳

	执行结果：
	当鼠标移进区域，立即执行函数；当鼠标移走，函数不再执行，数值不再变化。

5.使用定时器

6.双剑合璧 （采用定时器和时间戳的结合）

执行结果：
当鼠标进入区域时，会立即执行函数；当鼠标移动走的那一瞬间，还会执行一次函数

7.leading 和traling 的使用方法

节流的应用场景;
DOM元素的拖拽功能实现
射击游戏类
计算鼠标，移动的距离
监听scoll滚动事件