怎样解决鼠标多次点击 造成onclick函数运行混乱的问题

Question

比如做汤姆猫 当我点击它的耳朵时 希望他能发出愤怒的表情 当我点击肚子时  希望他能做出肚疼的动作 但是如果我在点击耳朵后  再次点击耳朵 程序就乱了 怎么解决 ？当我点击耳朵运行耳朵函数的过程中我又点击了肚子 希望他停下正在运行的函数去执行另一函数 这个怎么实现？ 

Answer 1

0.0，怎么会混乱呢  ，如果你用的定时器做的动画的话，点击相同的元素可能会照成动画的叠加，点击事件中 添加一个清除之前定时器即可。如果用的css做的动画 ，想要哪个动画停止 ，有相应的属性设置

Answer 2

首先你得明白，js是单线程语言，不存在同时执行的可能，你得所谓混乱是指，点击耳朵，执行耳朵事件，这个事件可能持续10s，10s内你又点击了肚子，执行肚子事件。假如耳朵事件的效果是上下摇晃脑袋，肚子事件是左右摇晃身体，那么执行耳朵事件过程中，在点击肚子事件的时候，耳朵事件造成脑袋此时正好摇到下面，然后此时身体开始左右摇晃，这个时候实际耳朵事件其实就立即停止了，但是却没有回到脑袋的初始位置，所以你觉得混乱了，这种解法是，触发任意事件前，都先恢复初始状态，初始化一下。这是在用js做动画效果的前提下，如果是用js操作动态图片等动画效果的情况下，点击后，事件就已经结束了，效果只是用事件激活了动态图，这种情况也是一样，专门用一个事件重置下状态就好了。