<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. 运用tp5上传图片，并生成缩略图

    最近想做个相册,需要用到上传图像,并且考虑到性能问题,还要生成缩略图,就学习下.在网上看了很多大神写的文章,经过各种调试总算出来了,分享下.不好之处,多多指教 ​ ​ ps:运用tp5图片类生成缩略图 ...

  2. 百度富文本ueditor使用小结

    最近因工作需要使用了ueditor,根据自己的需求将开发使用时遇到的问题小结分享下. 1.可到官网根据自身情况下载最新版本,https://ueditor.baidu.com/website/ 2.h ...

  3. (转载) python3: beautifulsoup的使用

    转载: https://www.cnblogs.com/chimeiwangliang/p/8649003.htmlfrom bs4 import BeautifulSoup import reque ...

  4. Mac 上有哪些鲜为人知且极大提高效率的工具？

    来源:知乎文章收录于:风云社区SCOEE,提供上千款各类mac软件下载 1. Focus  功能: 屏蔽影响你学习的网站.  同类软件:Self Control, Rescue Time  特点 ...

  5. Spring Boot笔记八：表单验证

    所谓的表单验证,就是为了防止用户乱输入的,这个问题前端的HTML5就可以判断了,其实不需要后端来验证,这里还是讲一下后端验证 首先,我们的Person类,我们加上一些表单验证的注释,如下: packa ...

  6. python django基础五 ORM多表操作

    首先在创建表的时候看下分析一下 1.作者表和作者详细地址表  一对一关系 理论上谁都能当主表 把Author设置成主表 au=models.OneToOneField(to='AuthorDetail ...

  7. Tomcat、Weblogic、WebSphere、JBoss服务器的选择

    一.应用点 Tomcat是Apache基金会提供的Servlet容器,它支持JSP, Servlet和JDBC等J2EE关键技术,所以用户可以用Tomcat开发基于数据库,Servlet和JSP页面的 ...

  8. dom4j基础教程【转】

    转自 http://blog.csdn.net/whatlonelytear/article/details/42234937 ,但经过大量美化及补充. Dom4j是一个易用的.开源的库,用于XML, ...

  9. Enum入门【原】

    package com.bobo.www.cxf.impl; public enum Traffic { Red(1), Green(2), Yellow(3);//必须最前面 private int ...

  10. bzoj千题计划324：bzoj5249: [2018多省省队联测]IIIDX（线段树）

    https://www.lydsy.com/JudgeOnline/problem.php?id=5249 把树建出来 如果所有的d互不相同,后续遍历即可 现在有的d相同 将d从小到大排序,考虑如何将 ...