无论是window.setTimeout还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,这就需要想方法解决。经网上查询后整理如下:
例如对于函数hello(_name),它用于针对用户名显示欢
迎信息:
var userName="jack"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); }
这时,如果企图使用以下语句来使hello函数延迟3秒执行是不可行的:
window.setTimeout(hello(userName),3000);
这将使hello函数立即执行,并将返回值作为调用句柄传递给setTimeout函数,其结果并不是程序需要的。而使用字符串形式可以达到想要的结果:
window.setTimeout("hello(userName)",3000);这是方法(一)
这里的字符串是一段JavaScript代码,其中的userName表示的是变量。但这种写法不够直观,而且有些场合必须使用函数名,于是有人想到了如下
方法(二):
<script language="JavaScript" type="text/javascript"> <!-- var userName="jack"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); } //创建一个函数,用于返回一个无参数函数 function _hello(_name){ returnfunction(){ hello(_name); } } window.setTimeout(_hello(userName),3000); //--> </script>
这 里定义了一个函数_hello,用于接收一个参数,并返回一个不带参数的函数,在这个函数内部使用了外部函数的参数,从而对其调用,不需要使用参数。在 window.setTimeout函数中,使用_hello(userName)来返回一个不带参数的函数句柄,从而实现了参数传递的功能。
另外也有人通过修改settimeout、setInterval来实现。即下面的
方法三:
<script language="JavaScript" type="text/javascript"> <!-- var userName="jack"; //根据用户名显示欢迎信息 function hello(_name){ alert("hello,"+_name); }//*============================================================= //* 功能: 修改 window.setInterval ,使之可以传递参数和对象参数 //* 方法: setInterval (回调函数,时间,参数1,,参数n) 参数可为对象:如数组等 //*============================================================= var __sto = setInterval; window.setInterval = function(callback,timeout,param){ var args = Array.prototype.slice.call(arguments,2); var _cb = function(){ callback.apply(null,args); } __sto(_cb,timeout); } window.setInterval(hello,3000,userName);
//-->
//-------------------------------------------实例二----------------
<body>
<div id="time1">time1</div>
<div id="time2">time2</div>
</body>
<script>
function TimerC(id){
this.id=id;
this.count=0;
this.timer=null;
}
TimerC.prototype.begin=function(count){
this.count=count;
this.show(this)();
this.timer=setInterval(this.show(this),1000);
}
//在这里,当把this传进来以后,传给obj,obj是外部函数的变量,return function是内部函数,
//内部函数可以调用外部函数的变量obj,而且在外部函数已经执行完了后还可调用,所以obj一直有效.
//setInterval(下一秒)执行的函数是这个内部函数,不带参数的.而不是外部函数.不用闭包,只直行一次.
//如果直接把闭包函数写在setInterval里也行,这里可以判断后clearInterval.return function后等于使用此函数了。
TimerC.prototype.show=function(obj){ return function(){ if(obj.count<0){ document.getElementById(obj.id).innerHTML="over"; clearInteval(obj.timer); return; } document.getElementById(obj.id).innerHTML=obj.count; obj.count--; } } var t2 = new TimerC("time2"); t2.begin(10); </script>
//----------------------------实例三---------------------------
-
function f(){ var a = []; var i; for(i=0;i<3;i++){ a[i] = function(){ alert(i); return i; } } return a; } var a= f(); a[0]();//3 a[1]();//3 a[2]();//3
- //我们新建了三个闭包,都指向了变量i。闭包并没有记住变量i的值,它仅是变量i的引用。在循环结束后,i的值是3,所以结果都是3
- a[0]是个函数引用,所以后面要加()来执行。
- 也可以写成:
- a[i] = (function(x){
- alert(x);
- return x;
- })(这里传参数 i 给x)
- 这样最后的a[0]就不用()了,因为a[i]付的值是return i;
function f() { var a = []; var i; for(i = 0; i < 3; i++) { a[i] = (function(x){ return function(){ alert(x); return x; } })(i); } return a; } var a = f(); a[0]();//0 a[1]();//1 a[2]();//2
- //我们又用了一个闭包,把变量i变成了局部变量x了,x变量每次都是不同的值了。如果没有彻底理解自调用函数那就如下写法就可以明白了
function f() { var a = []; var i; for(i = 0; i < 3; i++) { a[i] = (function(x){ //return function(){ alert(x); return x; // } })(i); } return a; } var a = f(); //a[0]();//0 //a[1]();//1 //a[2]();//2 <script type="text/javascript"> function refreshImgTimeout(){ return function(){ setInterval(refreshImgInteval,2000); } } var refreshImgInteval=function(){ var src="spectrum!spectrumImage.action?" + Math.random(); $("#spectrumImg").attr("src",src); } $(function(){ setTimeout(refreshImgTimeout(),2000); }); </script>
这里不用a[0]();a[1]();a[2]();alert(x)在循环时执行.如果alert(a[0])//0,alert(a[0]())报错,提示a[0]不是函数
相关推荐
在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数, 这就需要想方法解决。 一、采用字符串形式:——(缺陷)参数不能被周期性改变 setInterval(“foo(id...
这是我们常常会使用方法setInterval或setTimeout,但是由于这两个方法是由脚本宿主模拟出来的Timer线程,在通过其调用我们的方法是不能为其传递参数。 我们常用的使用场景是: 代码如下:window.setTimeout(...
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
前端开发中,我们会会经常使用定时器setinterval setTimeout等,但当我们离开页面时,定时器会被阻塞,导致我们再回到页面的时候定时任务会混乱运行,为些我的解决方案写了个简单demo,希望对你有所帮助
关于JS定时器(setTimeout setInterval)定时不准问题1
/****************************************************** // // 功能: 修改window.setTimeout,使之可以传递参数和对象参数 // 使用方法: window.setTimeout(回调函数,延迟时间,参数1,参数n) // ******************...
real-interval 如果你用setTimeout或setInterval实现过网页倒计时功能,你就会发现: 当电脑或者APP休眠了一段时间后,倒计时会出现问题:它比正确的时间慢了。 real-interval能解决这个问题。
使用setInterval()模拟进度条 使用setInterval()模拟进度条
博文链接:https://weiweichen1985.iteye.com/blog/193628
在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,针对这个问题,本文有个不错的解决方案
setInterval(code,millisec[,”lang”]) setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 参数 描述 code 必需,要调用的函数或要执行的代码串。 millisec 必需,周期性执行或调用...
使用场景:我在函数A中调用定时器函数,定时器是单独写的一个函数 原因:页面加载时我调用了1次函数A,然后又单独调用了一次定时器函数,导致调用了2次setInterval(),导致有setInterval_id有2个值。 通过打印定时器...
NULL 博文链接:https://wwwzhouhui.iteye.com/blog/585388
最近在做项目时,需要进行两个组件联动,一个轮询获取到消息,然后将其传递给另外一个组件进行横向滚动展示,...接下来通过本文给大家分享Vue中消息横向滚动时setInterval清不掉的问题及解决方法,感兴趣的朋友一起看看吧
主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。