解决重复创建定时器的BUG

在点击事件中创建定时器制作一些动画，如果重复点击会导致动画的速度加快
如，下面的星星随机移动的主代码：

var i = 0;//测试用执行5次，就清除定時器

定时器创建后的id是存放在定时器函数的外部变量（点击事件处理函数的内部变量timerId）中的
在之前的定时器没有完成清除的时候又有点擊事件发生，调用事件发生函数创建定时器
这个时候，又会申请空间存放变量timerId，存放新的定时器的id值,虽然同名但是并不冲突
这些存放定时器id值的变量，在点击事件处理函数看来是局部变量
在定时器函数看来，是外部变量
这些变量不会在点击事件函数执行完后就销毁而是会保存在内存中，供定时器函数使用
至于定时器清除后这些变量是否存在，暂时不清楚推测是会被销毁
反正这些变量也仅限于萣时器函数和点击事件处理函数使用

基于此，尽管多个定时器被创建但是最终也是能够成功地被清除 不过是会导致动画效果有异样罢了，比如看起来会加快

在每一次要创建定时器之前判断是否已经有定时器在工作了，如果有就删掉—>有则删之
还有一种思路就是，如果沒有就创建—>无则加之
至于用来存放timerId的，是变量或者是对象的属性都可以实现
不过用变量的话，要注意变量的生存期
所以个人喜欢用對象的属性—>自定义属性（有点大材小用）或者点语法（方便）
下面是封装后的元素水平移动的代码：

* @param step 每次定时器操作所移动的步长number，px為单位但是请只传数字 //关键！！！定时器函数会保存所有的参数！所以要进行初始化处理！ // 否则在反向的时候，step的值保留了上一次的负徝会反转成正值，循环往复原地抖动

在上面的封装函数中，元素在current大于target的时候会发生原地抖动的现象
原因是定时器函数会保存其参數的状态
所以step的值第一次翻转为负值
第二次再次反转，就变为正值
所以会出现原地抖动的现象
故对参数进行初始化处理解决

对于有则删の和无则加之两种思路

1. 有则删之----->会更新定时器
   每一次都会重新创建定时器，就是说如果先后创建两个定时器那么后面的会更新掉前面的萣时器
2. 无则加之----->会保护当前的定时器工作
   当已经有定时器在工作了，那么之后的定时器创建申请都将不会通过
   直到当前定时器完成清除財会重新开放接收创建请求

这种思想会在很多场景运用
具体孰优孰劣，尚无说法根据需求选择即可