1. <script type="text/javascript" >  
  2.  
  3. window.onload=function(){  
  4.  
  5.         for(var i=1;i<3;i++){  
  6.  
  7.             var m ="i="+i;  
  8.  
  9.             setInterval(function(){test(m);},4000);  
  10.  
  11.         }  
  12.  
  13.     }  
  14.  
  15.     function test(e) {  
  16.  
  17.         alert(e);  
  18.  
  19.     }  
  20.  
  21. </script>

上面这段代码的运行结果是:

alert 只弹出i=2;

这样的结果给人一种好像只创建了一个setInterval方法或者说是定时器吧.其实如果你自己看还是会发现有时弹出的对话框是连续的两个对话框的,所以这个程序说明for循环中是初始化了两个计时器的.只不过是因为变量的问题所以产生了这种奇异的现象.

原因是setInterval这个计数器是在延迟4秒后才进行调用,而在这期间for循环还是会继续运行的,那么当setInterval执行时i的值已经变成2了;

  1. <script type="text/javascript" >  
  2.  
  3. window.onload=function(){  
  4.  
  5.         for(var i=1;i<3;i++){  
  6.  
  7.             setInterval(function(){test(i);},4000);  
  8.  
  9.         }  
  10.  
  11.     }  
  12.  
  13.     function test(e) {  
  14.  
  15.         alert(e);  
  16.  
  17.     }  
  18.  
  19. </script>

那么上面这个alert的值却是3;这也就是说i传到setInterval这个计数器中的function参数是3,这个也是因为延迟的问题,当for循环执行完时i的值是3<因为i++了>

那么如何处理这种问题了:

这是一段代码:

  1. [html]  
  2.  
  3. <html>  
  4.  
  5. <head>  
  6.  
  7.     <script type="text/javascript">         
  8.  
  9.         function intervalTest(){  
  10.  
  11.             var cks = document.getElementsByName("check");  
  12.  
  13.             for(var i=0;i<cks.length;i++){  
  14.  
  15.                 if(cks[i].checked == true){  
  16.  
  17.                 mySetInterval(test,(3-i)*1000,i);  
  18.  
  19.                 }  
  20.  
  21.             }  
  22.  
  23.         }  
  24.  
  25.         function test(e) {  
  26.  
  27.             console.log(e);  
  28.  
  29.         }  
  30.  
  31.         function mySetInterval(f,time,param){  
  32.  
  33.             setInterval(function(){f(param);},time);  
  34.  
  35.         }  
  36.  
  37.     </script>  
  38.  
  39. </head>  
  40.  
  41. <body>  
  42.  
  43.     <input name="check" type="checkbox" id="1"/>OneCheck  
  44.  
  45.     <input name="check" type="checkbox" id="2"/>TwoCheck  
  46.  
  47.     <input name="check" type="checkbox" id="3"/>ThreeCheck  
  48.  
  49.     <input type="button" onclick="intervalTest()" value="IntervalTest"/>  
  50.  
  51. </body>  
  52.  
  53. </html>

上面主要是写了一个自己的方法mySetInterval(f,time,param)其中f为回调函数的名称,time为设置的间隔时间,param为f函数的参数值.

这样写的意思就是说当你在循环的时候就直接先调用我的这个方法,然后把参数传给我,然后你在进行for循环,这样就保证了每次传入的值不会在延迟time后而变化.

setInterval 传值设参数的更多相关文章

  1. setInterval()第一个参数带引号和不带引号的区别

    setInterval()第一个参数带引号和不带引号的区别:关于定时函数setInterval()的基本用法这里就不做介绍了,查阅相关教程即可,这里主要介绍一下setInterval()函数的第一个参 ...

  2. setInterval()的时间参数无法随参数的变化而变化

    2017-04-18 写了个随机抽奖的小案例,打算随机跳动十次,每次变化的时间越来越长,也就是跳动的速度越来越慢,结果发现setInterval的时间参数并不会随着变化. <!--案例的结构如下 ...

  3. 给定时器settimeout、setInterval调用传递参数

    无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在 许多场合必须要带参数,这就需要想方法解决.例如对于函数hello(_na ...

  4. php 判断是否get传值的参数是否存在

    if(is_array($_GET)&&count($_GET)>0)//先判断是否通过get传值了    {        if(isset($_GET["id&qu ...

  5. 关于setTimeout和setInterval的函数参数问题

    今天在写验证码倒计时小demo时,用了如下代码: window.setTimeout(count(num),1000); 这样直接使用将使count函数立即执行,并将返回值传递给setTimeout函 ...

  6. JS中的setInterval 函数体带参数f方法

    1.setInterval(function code,delaytime); 在设置自动调用执行function code时,我们可以采用下面三种方式来解决. 一.采用字符串形式:(参数不能被周期性 ...

  7. vue调用兄弟组件的方法使用vueBus调用$emit、$on（只需触发方法即可，不需要考虑传值或参数的问题）

    触发方: vueBus.$emit('queryAll') 被触发方: created() { vueBus.$on('queryAll', () => { this.getList() // ...

  8. JavaScript中setInterval常见的问题（setInterval第一个参数加引号与不加引号区别）

  9. java 参数传值

    基本数据类型参数的传值,参数为基本数据类型 class Computer{ int add(int x,int y){ return x+y; } } public class Example4_6 ...

随机推荐

  1. 2018.12.21 浪在ACM 集训队第十次测试赛

     浪在ACM 集训队第十次测试赛 A Diverse Substring B Vasya and Books C Birthday D LCM A 传送门 题解 B 传送门 题解: 这道题,就比较简单 ...

  2. 网络流n题

    近日好不容易在自救之路写完暑训遗留下来的网络流8题,在此回顾一下. Going Home POJ - 2195 题意:m要去H,一个H只能容纳一个m,一步一块钱,问最小花费. 思路:最小费用最大流的板 ...

  3. (四点共面) 51nod1265 四点共面

    1265 四点共面 1 秒 131,072 KB 0 分 基础题   给出三维空间上的四个点(点与点的位置均不相同),判断这4个点是否在同一个平面内(4点共线也算共面).如果共面,输出"Ye ...

  4. ASP.NET的checkboxlist,RadioButtonList,FileUpload,image控件的综合使用

    一.拖控件 控件拖完如图所示:(有些是对不齐的,加一个表单就好了,把他们都放在表单里) 单纯的RadioButton是不能只选择一个的,除非你手动给他们加上代码: RadioButton1.Group ...

  5. CentOS7 下编译 Hadoop

    准备工作 下载 Hadoop 源码 Source (当前最新 2.9.2) https://hadoop.apache.org/releases.html 打开压缩包会看到 BUILDING.txt ...

  6. 从Paxos到Zookeeper分布式一致性原理与实践 读书笔记之（一） 分布式架构

    1.1 从集中式到分布式 1 集中式特点 结构简单,无需考虑对多个节点的部署和节点之间的协作. 2  分布式特点 分不性:在时间可空间上随意分布,机器的分布情况随时变动 对等性:计算机之间没有主从之分 ...

  7. Git(工作区和暂存区概念)

    Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 先来看名词解释. 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工 ...

  8. python 可视化库

    在做titanic分析的过程中,看了一些大神的想法,发现在分析数据的过程中,许多大神会使用到seaborn,plotly这些库,而我等小白仅仅知道matplotlib这个唯一的数据可视化库而已.上网查 ...

  9. 自学python 7.

    内容:join , fromkeys , set , .add , .update , .pop , .remove , 交集(s1&s2) , 并集(s1|s2) , 深浅拷贝 , .cop ...

  10. 数据结构Java实现02----单向链表的插入和删除

    文本主要内容: 链表结构 单链表代码实现 单链表的效率分析 一.链表结构: (物理存储结构上不连续,逻辑上连续:大小不固定)            概念: 链式存储结构是基于指针实现的.我们把一个数据 ...