js中setInterval与setTimeout用法

电玩女神 2022-08-06 08:29 262阅读 0赞

原文：[http://blog.sina.com.cn/s/blog\_6b1ab3be0100pzmo.html][http_blog.sina.com.cn_s_blog_6b1ab3be0100pzmo.html]

# setTimeout #

**定义和用法:** 　　setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。

**语法:** 　　setTimeout(code,millisec)

**参数：**

code （必需）：要调用的函数后要执行的 JavaScript 代码串。

millisec（必需）：在执行代码前需等待的毫秒数。

**提示：** 　　setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

两种调用函数的写法：

function page\_list()\{

alert("shihuan");

window.setTimeout(page\_list, 5000);   //表示延时5秒执行page\_list()函数  
window.setTimeout("page\_list()", 30000);   //表示延时30秒执行page\_list()函数

带参数方法使用setTimeout要注意，setTimeout("函数名("+参数+")",毫秒数)，这里的参数只能是字符串形式的，而不能传递一个对象，网上很多朋友也在问此类问题，我在此说明下，以下我举几个个简单的例子：　　网上查找下“带参数 setTimeout”，很多朋友写了很多方法来实现使用setTimeout带对象的方法循环，例如： <script language="javascript">

var \_\_sto = setTimeout;

window.setTimeout = function(callback, timeout, param) \{

var args = Array.prototype.slice.call(arguments, 2);

var \_cb = function() \{

callback.apply(null, args);

\} 　　   \_\_sto(\_cb, timeout); 　　\}

//测试代码

function shihuan(a) \{

alert(a);

function yushibo(a, b, c) \{

alert(a + b + c);

var a = new Object();

window.setTimeout(shihuan, 1000, a);

window.setTimeout(yushibo, 2000, a, 6, 7);

</script>

此例中，setTimeout用法，setTimeout(回调函数, 时间, 参数1, ..., 参数n)。

\--------------------------------------------------------------------------------------------------

## setInterval定义和用法 ##

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

### 语法 ###

setInterval(code,millisec[,"lang"])

<table style="margin:0px; padding:0px"> 
 <tbody> 
  <tr> 
   <th style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif"><span style="word-wrap:normal; word-break:normal; line-height:18px; background-color:rgb(255,255,255)">参数</span></th> 
   <th style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif"><span style="word-wrap:normal; word-break:normal; line-height:18px; background-color:rgb(255,255,255)">描述</span></th> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="word-wrap:normal; word-break:normal; background-color:rgb(255,255,255)">code</span></td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="word-wrap:normal; word-break:normal; background-color:rgb(255,255,255)">必需。要调用的函数或要执行的代码串。</span></td> 
  </tr> 
  <tr> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="word-wrap:normal; word-break:normal; background-color:rgb(255,255,255)">millisec</span></td> 
   <td style="margin:0px; padding:0px; font-family:Verdana,宋体,sans-serif; line-height:18px"> <span style="word-wrap:normal; word-break:normal; background-color:rgb(255,255,255)">必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。</span></td> 
  </tr> 
 </tbody> 
</table>

### 返回值 ###

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

例子：

<form>  
    <input type="text" id="clock" size="35" />  
    <script language=javascript>  
       var int=`self.setInterval("clock()", 50)`  
       function clock()\{  
           var t=new Date()  
           document.getElementByIdx\_x\_xx\_x\_x\_x\_x\_x("clock").value = t  
       \}  
    </script>  
</form>  
<button οnclick="int=`window.clearInterval(int)">`Stop interval</button>  
</body>  
</html>

\--------------------------------------------------------------------------------------------------

clearTimeout()和clearInterval() ：

**JS里设定延时：**  
使用SetInterval和设定延时函数setTimeout 很类似。  
setTimeout 运用在延迟一段时间，再进行某项操作。  
setTimeout("function",time) 设置一个超时对象  
setInterval("function",time) //设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。  
clearTimeout(对象) 清除已设置的setTimeout对象  
clearInterval(对象) 清除已设置的setInterval对象  
**一、什么叫做JavaScript 的计时事件**  
使用JavaScript可以实现代码的延时执行，也就是说当一个函数被调用时不立即执行某些代码，而是等一段指定的时间后再执行，这就叫做计时事件。  
**二、JavaScript 的计时事件的函数**

setTimeout() //- 在指定时间后执行代码  
clearTimeout() //- 取消 setTimeout()

**注意:** setTimeout() 和 clearTimeout() 都是HTML DOM 的 Window 对象的函数。  
**三、setTimeout详解**  
var t = setTimeout("javascript 语句", 时间参数)  
注：时间参数单位为毫秒  
示例：var t=setTimeout("alert('3 seconds!')", 3000)  
如果js语句带变量，则必须用+号将变量连接起来，如：  
var t = setTimeout（"document.getElementByIdx\_x\_xx\_x\_x\_x\_x\_x("+menuid+").style.display='none'", 3000)  
四、clearTimeout详解  
语法：clearTimeout(setTimeout的变量名)  
示例：clearTimeout(t)    //其中t为前面设置的setTimeout的变量  
使用clearTimeout可以随时停止计时。  
五、应用技巧  
建议将setTimeout单独设置为一个函数。如：

function delayRun(code, time) \{  
   var t = setTimeout(code, time);  
\}

这样，在需要让某段代码延时执行的时候，只需在这段代码前加入这个函数就可以了。如：  
onmouseover = delayRun("setTab(0,0)", 500)  
其中setTab是一个自定义的函数。如果以后不想让setTab延时执行，则去掉语句中的delayRun相关的代码即可，  
改为：οnmοuseοver=setTab(0, 0) 就可以了。  
这种写法避免每一个需要延时的地方都写一段setTimeout的代码，只需要直接调用就可以了，很方便。也节省了代码的量。

[http_blog.sina.com.cn_s_blog_6b1ab3be0100pzmo.html]: http://blog.sina.com.cn/s/blog_6b1ab3be0100pzmo.html