js中事件重复绑定会相应导致多次处理程序的响应

2019独角兽企业重金招聘Python工程师标准>>>

项目中有一个选定车型的下拉组件，有品牌下拉和车系下拉，当我们选中某品牌后，才会弹出车系下拉。 测试中发现，当我们在选中某个品牌下拉后反悔，又重新选中了其他品牌，然后才选择车系，会出现问题响应程序多执行了一次。

经过反复调试找出原因： 当初设计这个功能时，约定当选中品牌后，触发车系下拉的弹出并与之绑定onChange事件，使得选中车系后请求相应数据。

问题关键在于，当jQuery为同一个元素绑定两次事件处理句柄，那么事件触发时，也同样会进行两次响应

也就是说当我们第一次选中品牌下拉时候，就触发了一次对车系下拉的事件绑定，而第二次选中品牌时候，又一次触发了车系下拉的事件绑定， 这样当我们最终选中车系下拉时，已经触发并对其进行了两次事件绑定，所以最终请求数据时也会请求两次。

ok，那我们如何避免之前那个bug呢。 我们可以在每次给车系下拉绑定事件处理句柄前，先清空之前可能存在的onChange事件绑定。代码如下：

$('input.series').unbind('change').on("change", function(e){ ... }）

只需要简单的调用unbind方法并传入需要被终结的事件名就可以了。

延伸一下的话，jQuery中经常有这类处理，在进行新的处理之前，终结掉此前的处理。

场景如有个下拉菜单，设计效果是鼠标移中则显示菜单，鼠标移除则隐藏菜单。 那么如果我们较快的反复移中移除，就会产生动画累积，那么在最后一刻的鼠标操作并不会触发菜单的正常显示，反而会导致菜单不断的收拉闪烁 因为当前的动画队列中排满了好几个处理，只有当队列中的处理陆续结束才会响应最后一刻符合用户意图的鼠标操作。 处理这个问题时，我们需要在每次响应鼠标事件时，都立刻终结动画队列里排布的之前的事件，代码如下：

$('#target').stop(true, true).animate();

stop方法的第一个参数规定是否停止被选元素的所有加入队列的动画，第二个参数规定是否允许完成当前的动画，

转载于:https://my.oschina.net/u/2400083/blog/483881