<script type="text/javascript" >  

window.onload=function(){  

        for(var i=1;i<3;i++){  

            var m ="i="+i;  

            setInterval(function(){test(m);},4000);  

        }  

    }  

    function test(e) {  

        alert(e);  

    }  

</script>

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

alert 只弹出i=2;

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

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

<script type="text/javascript" >  

window.onload=function(){  

        for(var i=1;i<3;i++){  

            setInterval(function(){test(i);},4000);  

        }  

    }  

    function test(e) {  

        alert(e);  

    }  

</script>

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

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

这是一段代码:

[html]  

<html>  

<head>  

    <script type="text/javascript">         

        function intervalTest(){  

            var cks = document.getElementsByName("check");  

            for(var i=0;i<cks.length;i++){  

                if(cks[i].checked == true){  

                mySetInterval(test,(3-i)*1000,i);  

                }  

            }  

        }  

        function test(e) {  

            console.log(e);  

        }  

        function mySetInterval(f,time,param){  

            setInterval(function(){f(param);},time);  

        }  

    </script>  

</head>  

<body>  

    <input name="check" type="checkbox" id="1"/>OneCheck  

    <input name="check" type="checkbox" id="2"/>TwoCheck  

    <input name="check" type="checkbox" id="3"/>ThreeCheck  

    <input type="button" onclick="intervalTest()" value="IntervalTest"/>  

</body>  

</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. 关于indexOf，charAt，subString的区别

    @Test public void indexOf() { // 注意:在Unicode表中A-Z的十进制对应:65-90 // a-z的进制对应:97-122 // 0-9的十进制对应:48-57 ...

  2. git ssh https 踩坑记 ---- 域账号密码更新

    前几天突然通知要更新公司的域账号密码,然后git pull就一直报 fatal: Authentication failed for 'https://git ... 很奇怪的是,有一个项目git p ...

  3. 2017-12-15python全栈9期第二天第七节之练习题

    #!/user/bin/python# -*- coding:utf-8 -*-print(6 or 2 > 1)print(3 or 2 >1 )print(0 or 5 <4)p ...

  4. python机器学习-sklearn挖掘乳腺癌细胞（五）

    python机器学习-sklearn挖掘乳腺癌细胞( 博主亲自录制) 网易云观看地址 https://study.163.com/course/introduction.htm?courseId=10 ...

  5. Jz2440 环境安装

    目录 Jz2440 环境安装 Ubuntu 设置 烧写工具 交叉编译环境 使用说明 烧写特性 title: Jz2440 环境安装 tags: linux date: 2018-09-20 22:56 ...

  6. Mybatis笔记三：全局配置文件

    目录 配置文件 dtd提示 properties标签(不怎么用) typeAliases 自动把下划线换成驼峰命名 配置文件 看着这个配置文件,我们将对这个配置文件进行细致的讲解 <?xml v ...

  7. GET和POST传输方式

    GET和POST传输 在很多人看来,get和post的区别有比如安不安全,传输有大小限制等,在这里,我将对get和post做出客观的评价: GET: 传输方法:get传输数据一般是在地址栏的url的问 ...

  8. ant design环境搭建过程中遇到的问题--Windows-dva-cli

    基础的此处略去,nodejs和npm是前提. 1.官网介绍的是脚手架工具是antd-init,但是又建议真实项目中用dva-cli,所以博主就直接装的是dva-cli,这里主要是简单介绍下博主在Win ...

  9. http-request详解

    HTTP请求 请求数据格式 响应数据格式 request

  10. 爬虫基础02-day24

    写在前面 上课第24天,打卡: 努力不必让全世界知道: s16/17爬虫2 内容回顾: 1. Http协议 Http协议:GET / http1.1/r/n...../r/r/r/na=1 TCP协议 ...