JS动态添加元素及绑定事件造成程序重复执行解决


Posted in Javascript onDecember 07, 2017

前言

本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行,很多人在文章里写到了,也说了用off方法来解绑,但都未能点出问题的本质,几乎都忽略了问题的本质其实是事件委托造成的。

话不多说,上点天天看到的代码:

第一种:  

$(document).on('click', function (e) {
 consol.log('jquery事件绑定')
 });

第二种:  

document.addEventListener('click',function (e) {
 consol.log('原生事件绑定')  
 });

第三种:  

var id = setInterval(function () {
 console.log('定时器循环事件绑定')
 },1000);

上面的代码,相信不少同盟,天天都会写到,看似简单的事件绑定,却经常能给我们带来意想不到的结果,特别是在这个SPA,应用AJAX页面局部刷新如此盛行的时代。

那什么是事件绑定,造成的程序重复执行呢?这个事情要说清除,好像不是那么简单,还是用一段测试代码来说明吧。你可以拷贝到本地,自己试试: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<button class="add_but">点击</button>
<div id="point">fdfsdf
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script> 
<script>
 var count=1;
 var example = {
 getData:function () {
  var data ={
  content:'df'+count++,
  href:''
  };
  this.renderData(data);
 },
 renderData:function (data) {
  document.getElementById('point').innerHTML='<div>this is a '+data.content+'点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></div>';
  $('#point').on('click','.read-more',function () {
  alert('事故发生点');
 })
/*  setInterval(function () {
  console.log('fdfdfg');
  },2000);*/
  /*用冒泡来绑定事件,类似于Jquery的on绑定事件*/
 /* document.querySelector('body').addEventListener('click',function (e) {
  if(e.target.classList.contains('read-more')){
   alert('事故发生点');
  }
  })*/

 }
 } ;
 document.querySelector('.add_but').addEventListener('click',function (e) {
 example.getData();
 e.stopImmediatePropagation();
 });
</script>
</body>
</html>

以上是我为说清这个事情写的一段测试代码,可以拷贝下来试试。当我们点击页面的按钮,触发调用example.getData()这个函数,模拟ajax获取数据成功后,就会根据局部刷新页面内元素类名为point的内容,同时会为加载这个内容中的read-more A标签绑定一个事件,就这样我们想要的效果出现啦,当元素第一次加载时,页面正常,‘事故发生点'弹出一次,当二次刷新触发后,你会发现其弹出了两次,当第三次时,你会发现,其弹三次,以此类推。。。。

OMG,这个程序到底怎么了,我明明每次事件绑定前,前面绑定的元素都删除了,为什么,被删除的尸体感觉还在动作,好吧,上面就是我第一次遇到这个情况发出的感叹。

最后是问身边的大神,才突然领悟,原来绑定一直都在,而这个绑定被保存在一个叫做事件队列的地方,他不在循环执行的主线程中,画了一张需要默契才能看懂的图,勉强看一看。

JS动态添加元素及绑定事件造成程序重复执行解决

事件队列

还原真相

其实上面那一段代码是为了测试而特意写的代码,除了定时器外,其他两个点击事件换个正常的写法,重复执行的情况是不会出现的,正常的代码:  

// jquery 事件直接绑定的写法;
 $('#point .read-more').on('click',function () {
  alert('事故发生点');
 })
 // 原生JS 事件直接绑定的写法;
 document.querySelector('.read-more').addEventListener('click',function (e) {
  alert('事故发生点');
 })

看出差别了吗?其实就是不用冒泡来事件委托,而是直接给添加的元素绑定事件。所以Dom事件是讲道理的,动态添加的元素,再动态为此绑定事件,待元素被删除后,与其绑定的相应事件其实是会从事件绑定队列中删除的,而非如上面测试代码,给人的感觉是元素移除后,但其绑定的事件还在内存中。但请记住,这是个误会,上面测试的代码之所以给人这种错觉,是因为我们并没有为动态添加的元素绑定事件,而仅仅是用了事件委托的形式,实际上事件是绑定在#point元素上的,其一直存在,利用事件冒泡来让程序知道我们点击了动态添加的链接元素。测试中特意用原生js去重现了这次事件委托,jquery的on绑定事件其实原理基本相同。  

document.querySelector('body').addEventListener('click',function (e) {
 if(e.target.classList.contains('read-more')){
  alert('事故发生点');
 }
})

解除bug的那些方法

定时器

这个是最易犯的错误,当然也是最易解的错误,因为设定定时器时,其会返回一个数值,这个数值应该是事件队列此定时器中的一个编号吧,类似于9527;步骤就是设定一个全局变量来保持这个返回值id,在每次设定定时器时,先通过id清除已经设定过的定时器    

clearInterval(intervalId); //粗暴的写法
 intervalId&&clearInterval(intervalId); //严谨的写法
 intervalId=setInterval(function () {
  console.log('fdfdfg');
  },2000);

Dom事件

其实上面我们已经说过,最直接的办法就是不采用事件委托,而是采用直接绑定;如果确实要用事件委托来绑定事件,那就是解绑。在jquery中提供了unbind函数来解绑事件,不过在jquery 1.8版本以后,这个方法已经不推荐了,而是推荐off方法。比如上面的on事件委托的方式,要解绑,可采用语句$('#point').off('click','.read-more')

有缺陷的解决方案,添加flag

很好理解,第一次绑定后,flag置位,下一次在执行这个绑定时,程序就知道在这个节点上已经有了绑定,无需再添加,具体操作就是:  

var flag = false;
 var example = {
 getData: function () {
  var data = {
  content: 'df' + count++,
  href: ''
  };
  this.renderData(data);
 },
 renderData: function (data) {
  document.getElementById('point').innerHTML = '<div>this is a ' + data.content + '点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></div>';
  !flag && $('#point').on('click', '.read-more', function () {
  alert('事故发生点'+data.content);
  });
  flag = true;
 }
 };

从逻辑上,看起来没有问题,但仔细观察,发现这是有问题的。当我们第二次,第三次刷新时,弹出框的内容还是和第一次模拟刷新后点击后弹出的内容一致,还是'事故发生点df1',而非和内容一样递增,为什么呢,感觉事件队列里面的回调函数被单独保存起来了,data被深拷贝了,而不再是一个引用。确实有点难理解,我也不知道到底是为什么,如果哪位能说清楚,还请一定告知。

结个尾写在最后,其实平常写一些程序时,事件绑定,造成程序重复执行这些情况很少发生,其通常会出现在我们写插件的时候,插件需要适应多种调用环境,所以在插件内部做到防止事件重复绑定的情况非常重要。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
jQuery实现限制textarea文本框输入字符数量的方法
May 28 Javascript
详解JavaScript 中的 replace 方法
Jan 01 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
Require.js的基本用法详解
Jul 03 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 #Javascript
jquery学习笔记之无new构建详解
Dec 07 #jQuery
利用Node.js检测端口是否被占用的方法
Dec 07 #Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 #Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 #Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 #Javascript
react学习笔记之state以及setState的使用
Dec 07 #Javascript
You might like
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
二级域名转向类
2006/11/09 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
Python正则表达式如何匹配中文
2020/05/27 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
高级Java程序员面试题
2016/06/23 面试题
工作交流会欢迎词
2014/01/12 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
质量保证书范本
2014/04/29 职场文书
生物学专业求职信
2014/07/23 职场文书
药店采购员岗位职责
2014/09/30 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
使用numpy实现矩阵的翻转(flip)与旋转
2021/06/03 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python