javascript中的两个定时函数setTimeOut()和setInterVal()的区别

js中经常性要用到间隔几秒或暂停几秒执行某个函数,

简单介绍我从网上收集到setTimeOut()和setInterVal()的区别
1、setInterVal()介绍

1)定义

setInterval() 方法可按照指定的周期(以毫秒计)来执行函数或表达式。该方法会不停地循环调用函数,直到使用 clearInterval() 明确停止该函数或窗口被关闭。

clearInterval() 函数的参数即 setInterval() 返回的 ID 值。(也可理解为关闭定时函数的对象)

2)语法

setInterval(code,millisec[,"lang"])
code 必须。要调用的函数或要执行的代码串。(可以直接alert("测试"),也可以是function方法)
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

3)返回值

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

4)用法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setInterVal用法</title>
</head>
<script type="text/javascript">
    var num = 0;
    var t;
    //开始计时方法
    function startInterVal(){
        document.getElementById("test").innerHTML = num;
        num = num+1;        
    }
    //setInterVal():按照指定的周期(以毫秒计)来调用函数或计算表达式
     t = window.setInterval("startInterVal()",1000);
    
     //结束计时方法
    function stopInterVal(){
        window.clearInterval(t);
    }
    
</script>
<body>
<form>
<input type="button" value="开始计时" onClick="startInterVal()">
<input type="button" value="结束计时" onclick="stopInterVal()" />

<div>计时: <span id="test"></span></div>
</form>
</body>
</html>
5)结果视图

 

2、setTimeOut()介绍

1)定义:

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,该方法与 setInterval() 方法不同的是该方法只执行一次。

2)语法:

setTimeout(code,millisec)
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数,以毫秒计。

3)返回值:

一个可以传递给 Window.clearTimeOut() 从而取消对 code 执行的值(对象)

4)用法:

简单例子

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeOut用法</title>
<script type="text/javascript">
    var num = 0;
    var t;
    //开始定时方法
    function startTimout(){
        //把数字进行累加赋值给test
        document.getElementById("test").innerHTML = num;
        num = num+1;
        //调用setTimeOut函数
        t= window.setTimeout("startTimout()",1000);
    }
    //清除定时方法
    function StopTimeOut(){
     window.clearTimeout(t);
    }
</script>
</head>
<body>
<form>
<input type="button" value="开始计时" onClick="startTimout()">
<input type="button" value="结束计时" onclick="StopTimeOut()" />

<div>计时:<span id="test"></span></div>
</form>
</body>
</html>

5) 结果视图:

6)提示:

(1)setTimeout() 虽然是只执行一次代码。但如果许要多次调用,除了使用 setInterval() 外还可以让被执行的代码里面自身再次调用 setTimeout() 方法已达到多次执行的目的。
(2)另外setTimeout()方法也同样可以返回一个ID值,以方便使用clearInterval()方法对使用setTimeout()方法的取消。

 

参考网址:http://www.jb51.net/article/49942.htm

posted @ 2016-11-28 19:23  小小邪  阅读(3533)  评论(0编辑  收藏  举报