在同一个元素上绑定多个计时器而无法关

最近在工作时写了这么一个制作波纹效果的函数

      当我点击一个元素, 就会开启一个计时器, 然后在计时器中实现一些动画效果, 需要注意的是我是把计时器作为一个自定义属性obj.timer绑定在元素上面的. 然而, 当我非常快速的点击2次之后, 会发现计时器关不掉的. 我一直很纳闷, 明明我只开启了一个计时器, 它都是绑定在obj上面的, 不管我怎么开启, 只要调用清除计时器函数clearInterval时把obj.timer作为参数传递进去就可以啦. 

      后面查了很多资料, 发现问题出在这里: 当我以非常快的速度连续点击两次时, 第一次会开启一个计时器传递给obj.timer并展示动画效果.然后当这个计时器还没有达到关闭的条件时, 又开启了第二个计时器. 此时obj.timer将会指向第二个计时器, 那么第一个还没关闭的计时器就被遗弃在内存中了, 所以当后面满足关闭条件时, 调用clearInterval 是关闭了第二个计时器, 而第一个计时器其实是没有被清除的, 它被放在内存当中一直调用, 而此时又失去了对它的引用( 因为此时obj.timer指向的是第二个计时器 ), 所以此时第一个计时器就永远没办法关闭了. 那么它就会一直占用内存, 直到你的浏览器奔溃为止. 那么解决方法是什么呢? 就是每次当我调用这个函数的时候, 就立即把计时器关闭, 这样就不会造成第二个计时器传给obj.timer之后第一个计时器就被"遗忘"在内存中而继续执行了

因为代码执行速度非常快, 所以你看到的效果就是会立刻执行下一次的动画效果, 而不会产生什么停顿现象的, 所以这个解决方案被证实是可行的.