setTimeout/setInterval的使用和参数调用方法

最新推荐文章于 2023-02-18 08:57:54 发布

奋斗中的小黄鸡

最新推荐文章于 2023-02-18 08:57:54 发布

阅读量1.3k

点赞数

分类专栏：前端杂碎文章标签： setTimeout setInterval 参数调用

前端杂碎专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以下内容摘自这位同学：http://qinglangee.iteye.com/blog/160377

[setTimeout]

setTimeout(表达式,延时时间)
在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次

用setTimeout实现的自动变化显示随机数的效果:

     Html代码   
     
   
 <html>  
 <head>  
 <script>  
 window.onload=sett;  
 function sett()  
 {  
 document.body.innerHTML=Math.random();  
 setTimeout("sett()",500);  
 }  
 </script>  
 </head>  
 <body>  
 </body>  
 </html>  

[setInterval]

setInterval(表达式,交互时间)
则不一样,它从载入后,每隔指定的时间就执行一次表达式

用setInterval实现的自动变化显示随机数的效果:

     Html代码   
     
   
 <html>  
 <head>  
 <script>  
 function sett()  
 {  
 document.body.innerHTML=Math.random();  
 }  
 setInterval("sett();", 500);  
 </script>  
 </script>  
 </head>  
 <body>  
 </body>  
 </html>  

在使用JScript的时候，我们有时需要间隔的执行一个方法，比如用来产生网页UI动画特效啥的。这是我们常常会使用方法setInterval或 setTimeout，但是由于这两个方法是由脚本宿主模拟出来的Timer线程， 在通过其调用我们的方法是不能为其传递参数。
我们常用的使用场景是：

     Javascript代码   
     
   
 window.setTimeout("delayRun()", n);   
 window.setInterval("intervalRun()", n);   
 window.setTimeout(delayRun, n);   
 window.setInterval(intervalRun, n);   

显然强行代参数的调用： window.setTimeout("delayRun(param)", n);

     Javascript代码   
     
   
 window.setInterval("intervalRun(param)", n);   
 window.setTimeout(delayRun(param), n);   
 window.setInterval(intervalRun(param), n);   

都是错误的，因为string literals形式的方法调用，param必须是全局变量(即window对象上的变量)才行；而 function pointer形式的调用，完全错误了，这是把函数的返回值当成了setTimeout/setInterval函数的参数了，完全不是我们所望的事情。 //（这个不懂。。。。。）

解决这个问题的办法可以使用 匿名函数包装的方式，在以下scenario中我们这么做：

     Javascript代码   
     
   
 function foo()   
 {   
     var param = 100;   
     window.setInterval(function()   
     {   
         intervalRun(param);   
     }, 888);   
 }   
 function interalRun(times)   
 {   
     // todo: depend on times parameter   
 }   