防抖的定义和实现

一，防抖

1. 什么是防抖 ？

防抖是一个函数，所以也叫防抖函数，它能为普通函数添加并管理执行周期。

张三正在打农药，所玩的游戏角色快要死翘，于是按下回程，回程需要执行8秒的回程动画，回程动画执行完毕之前抖可以通过移动取消准备工作，如果没有取消，执行回程动作，瞬间移动到泉水。

为了区分概念，我们把等待执行的时间叫做等待时间，最终想要执行的函数叫做执行函数

（1）回程的周期

为了完成回程，经历了三个步骤：
1.按下回程键 =》2.回程动画开始 =》3. 移动到泉水
----------对应的是---------
1.事件触发 =》2.等待时间 =》3.执行函数
等待=>执行 是一个周期

（2）回程的实现

[ 定时器：MDN setTimeout] developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
一般情况下，我们用定时器来实现一个周期：8秒后执行 移动到泉水的函数执行

function backToTheHarbor () {
       回程动画.run()
       cycle = setTimeout(()=>{
          移动到泉水.run()
       },8S)
}
键盘设备.监听("回程健",backToTheHarbor)

周期虽然实现了，但是没有实现互斥，触发的每一次都会把定时器放到了异步队列，触发了n次事件，就会立刻执行n次回程动画，并且在10秒左右的时候就执行n次函数，一个任务的周期没有结束就开始另一个任务了。

周期的管理：每个周期都是独立的，那就需要对周期进行管理，在执行前后都进行初始化，但是，要怎么知道异步队列中有同样的指令在执行呢？ 一般情况下我们用闭包来实现。

function backToTheHarbor () {
    var cycle;
    return function(){
       clearTimeout(cycle)
       回程动画.run()
       cycle = setTimeout(()=>{
          回程动画.stop()
          移动到泉水.run()
          cycle = null
       },10000)
    }
}
键盘设备.监听("回程健",backToTheHarbor)