防抖和节流

为什么要使用防抖和节流

        防抖和节流主要用于需要进行连续的时间监听上面，比如resize,scroll,mousemove等等，但是对于我们来说，不希望事件持续的触发过程中去频繁的去执行回调函数。如果这些回调函数包含一些向后端发起的请求，比如监听input输入框中的内容向后端发起ajax请求，那么在持续输入信息时会不断向后端发起请求，这样不仅从资源上来说是很浪费的行为，而且实际应用中，用户也是输出完整的字符后，才会请求

防抖

        防抖是指停止触发事件后在等待n秒执行一次，如果在n秒内又触发了事件，那么就会重新刷新n秒时间

        1、例子：比如说坐公交，每一位乘客上车代表触发一次事件，当最后一个乘客上车后，司机等待几秒后才关门。

        2、前端中应用场景：

               *搜索框中搜索输入，只需用户最后一次输入完，在发起请求

               *手机号，邮箱验证

        3、防抖函数分为立即执行版和非立即执行版

              非立即执行版

            代码思想：该代码的运行原理是，通过监听div当鼠标每次移动时都会执行debounce函数返回的那个函数（debounce函数只执行一次），每次移动都会导致回调函数中的计时器重新开始计时，当计时开始满足1s后才执行回调函数（先等待满足一秒后执行）。

疑问一：

            这里有很多人也许不知道变量context和args在这里的作用，那么可以对比addEventListener进行的事件监听，在addEventListener的监听中我们可以向回调函数传和参数e，这个e和这里的args是等价的。而这个this是为了保持指向不变

疑问二：

          变量timeout每次函数执行完，不会消失吗。这里就涉及的闭包，不熟悉闭包的可以先学习学习闭包。当该函数debounce(Fun, 1000)执行时就会产生一个闭包，当debounce函数执行完时，timeout依然存在于内存中，我们可以通过对div的监听来执行debounce返回的函数，并修改timerout中的数值。注意在该代码的运行中只产生了一个闭包。

                立即执行版

      代码思想：该代码是通过控制timeout的值来确定是否执行回调函数，如果timeout的值为         false那么将会立即执行func.apply()否则将不会执行函数。当首次事件触发时（timeout==false），会立即执行函数，如果在此阶段不断的触发事件（timeout==true）那么定时器会不断清除，直到等待一秒内部触发，

该代码在定时器中修改timeout的值，如果在等待的时间内重新触发事件，那么原来的定时器会被清除，重新开始计时，知道满足1s后再执行（先执行函数后等待时间）

节流

        连续触发事件但是函数在n秒钟只执行一次

          1、例子：乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。

          2、前端应用场景：

                 *滚动加载，加载更多或滚动到底部监听

                 *高频点击提交，表单重复提交

          3、节流分为时间戳版和定时器版

                事件戳版

                   定时器版