专栏首页前端之攻略for 循环中实现多个点击事件 原

for 循环中实现多个点击事件 原

<script type="text/javascript">   function buttonInit(){       for(var i=1;i<4;i++){           var b=document.getElementById("button"+i);           b.addEventListener("click",function(){ alert("Button"+i);},false);       }   }   window.onload=buttonInit;   </script>   </head>   <body>   <button id="button1">Button1</button>   <button id="button2">Button2</button>   <button id="button3">Button3</button>   </body>   </html> 全部弹出button4 当注册事件结束后,i的值是4,当点击按钮时,事件函数function(){alert("button"+i)}这个匿名函数中没有i, 所有到buttonInit函数中找,此时的i为4,所有弹出button4  (但是此时确实是点击不同的按钮,只是都显示i=4)修改如下: <script> function buttonInit(){       for(var i=1;i<4;i++){      (function (arg) {         var b=document.getElementById("button"+i);            b.onclick=function(){alert("Button"+arg);};     })(i);     }   }   window.onload=buttonInit;  </script>  js改成如上可以弹出button1 ,button2 , button3 另一个例子 for(var i=0;i<3;i++){ setTimeOut(function(){ console.log(i) },500) }; 执行结果:3,3,3 所以上述函数应该写成: for(var i=0;i<3;i++){ (function(i){ setTimeOut(function(){ console.log(i) },500); })(i); } 另一种修改方法:把var改成let即可 for(let i=0;i<3;i++){ setTimeOut(function(){ console.log(i) },500) }; 这种情况创建了太多的定时器,如果i值非常大,会非常消耗资源,大大降低执行性能,优化如下,始终只有一个定时器    let i = 0;     let time = setInterval(output, 1000)     function output() {         if (i < 10) {             console.log(i)             console.log(time)             i++         } else {             clearInterval(time)         }     } 如果自定义参数  let i = 0;     let time = setInterval(function() {output(8)}, 1000)     function output(num){           if (i < num) {             console.log(i)             i++         } else {             clearInterval(time)         }     }     </script>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap模态框中含有echart图表的打印

    首先模态框的弹出用js方法实现  $('#myModa1').modal('show');然后使用定时器setTimeout(function(){初始化ech...

    tianyawhl
  • 数组或对象中的内容间隔显示

    总结:间隔显示,不要使用for 循环,原因是for循环是同步,setTimeout是异步,同步执行完再执行异步。

    tianyawhl
  • js 数组去重 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 这几天在看JS的数据结构与算法

    这几天在看数据结构与算法,js描述这书 ? 这书看着标题挺高大上的,但内容不难, 只要有JS的基本知识,都能看明白。 它里面不讲JS本身如何,而是把各种数据结...

    web前端教室
  • 高质量编码-小区今日实时累积用水

    由wanderGIS这个大牛的兼容Arcgis JS API编写的EchartsLayer做的百度迁徙可视化启发,我们可以在地图上实现一个小区今日实时累积用水的...

    MiaoGIS
  • JavaScript 提升不完全指北

    很多人会认为是 undefined , 因为 var a 声明在 a = 2 之后, 他们自然而然地认为变量被重新赋值了, 因此会被赋予默认值 undefin...

    撸码那些事
  • 你不知道的javaScript笔记(1)

    规避冲突 function foo(){ function bar(a){ i = 3; console.log(a + i); } for ( v...

    用户1197315
  • 解读小程序敏感数据获取方式以及解密机制

    话说,小程序内存在一种敏感数据的加解密机制,这个机制在不同开发接口/组件下有通用的解密方式,然而却具备不尽一样的交互机制,看不懂?没事,先接着往下看。 首先要明...

    花叔
  • NYOJ-----素数环

    素数环 时间限制:1000 ms  |           内存限制:65535 KB 难度:2 描述 有一个整数n,把从1到n的数字无重复的排列成环,且使每相...

    Gxjun
  • 帮上百家客户完成数字化转型后,SAS开出了四剂药方应对变革焦虑

    大数据和人工智能已然成为了这个时代的主题曲,与此同时,焦虑感也开始在行业中蔓延,从初创公司到行业巨头,都急切地想要跟上这股越炒越热的浪潮。

    大数据文摘

扫码关注云+社区

领取腾讯云代金券