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

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

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

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

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

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

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

只须要简单的调用unbind方法并传入须要被终结的事件名就能够了。

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

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

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

stop方法的第一个参数规定是否中止被选元素的全部加入队列的动画，第二个参数规定是否容许完成当前的动画，