js中事件重复绑定会相应导致多次处理程序的响应
2015-07-26 00:00
686 查看
项目中有一个选定车型的下拉组件,有品牌下拉和车系下拉,当我们选中某品牌后,才会弹出车系下拉。 测试中发现,当我们在选中某个品牌下拉后反悔,又重新选中了其他品牌,然后才选择车系,会出现问题响应程序多执行了一次。
经过反复调试找出原因: 当初设计这个功能时,约定当选中品牌后,触发车系下拉的弹出并与之绑定onChange事件,使得选中车系后请求相应数据。
问题关键在于,当jQuery为同一个元素绑定两次事件处理句柄,那么事件触发时,也同样会进行两次响应
也就是说当我们第一次选中品牌下拉时候,就触发了一次对车系下拉的事件绑定,而第二次选中品牌时候,又一次触发了车系下拉的事件绑定, 这样当我们最终选中车系下拉时,已经触发并对其进行了两次事件绑定,所以最终请求数据时也会请求两次。
ok,那我们如何避免之前那个bug呢。 我们可以在每次给车系下拉绑定事件处理句柄前,先清空之前可能存在的onChange事件绑定。代码如下:
只需要简单的调用unbind方法并传入需要被终结的事件名就可以了。
延伸一下的话,jQuery中经常有这类处理,在进行新的处理之前,终结掉此前的处理。
场景如有个下拉菜单,设计效果是鼠标移中则显示菜单,鼠标移除则隐藏菜单。 那么如果我们较快的反复移中移除,就会产生动画累积,那么在最后一刻的鼠标操作并不会触发菜单的正常显示,反而会导致菜单不断的收拉闪烁 因为当前的动画队列中排满了好几个处理,只有当队列中的处理陆续结束才会响应最后一刻符合用户意图的鼠标操作。 处理这个问题时,我们需要在每次响应鼠标事件时,都立刻终结动画队列里排布的之前的事件,代码如下:
stop方法的第一个参数规定是否停止被选元素的所有加入队列的动画,第二个参数规定是否允许完成当前的动画,
经过反复调试找出原因: 当初设计这个功能时,约定当选中品牌后,触发车系下拉的弹出并与之绑定onChange事件,使得选中车系后请求相应数据。
问题关键在于,当jQuery为同一个元素绑定两次事件处理句柄,那么事件触发时,也同样会进行两次响应
也就是说当我们第一次选中品牌下拉时候,就触发了一次对车系下拉的事件绑定,而第二次选中品牌时候,又一次触发了车系下拉的事件绑定, 这样当我们最终选中车系下拉时,已经触发并对其进行了两次事件绑定,所以最终请求数据时也会请求两次。
ok,那我们如何避免之前那个bug呢。 我们可以在每次给车系下拉绑定事件处理句柄前,先清空之前可能存在的onChange事件绑定。代码如下:
$('input.series').unbind('change').on("change", function(e){ ... })
只需要简单的调用unbind方法并传入需要被终结的事件名就可以了。
延伸一下的话,jQuery中经常有这类处理,在进行新的处理之前,终结掉此前的处理。
场景如有个下拉菜单,设计效果是鼠标移中则显示菜单,鼠标移除则隐藏菜单。 那么如果我们较快的反复移中移除,就会产生动画累积,那么在最后一刻的鼠标操作并不会触发菜单的正常显示,反而会导致菜单不断的收拉闪烁 因为当前的动画队列中排满了好几个处理,只有当队列中的处理陆续结束才会响应最后一刻符合用户意图的鼠标操作。 处理这个问题时,我们需要在每次响应鼠标事件时,都立刻终结动画队列里排布的之前的事件,代码如下:
$('#target').stop(true, true).animate();
stop方法的第一个参数规定是否停止被选元素的所有加入队列的动画,第二个参数规定是否允许完成当前的动画,
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- ON_COMMAND_RANGE多个按钮响应一个函数的解决方法
- PHP+JS实现大规模数据提交的方法
- 仿51JOB的地区选择效果(可选择多个地区)
- js身份证验证超强脚本
- C#与js实现去除textbox文本框里面重复记录的方法