JS 定时器

浏览数：40 / 时间：2015年06月09日

http://biancheng.dnbcw.info/javascript/129752.html在javascritp中，有两个关于定时器的专用函数，它们是：

1.倒计定时器：timename=setTimeout("function();",delaytime);

2.循环定时器：timename=setInterval("function();",delaytime);

　　function()是定时器触发时要执行的是事件的函数，可以是一个函数，也可以是几个函数，或者javascript的语句也可以，单要用;隔开；delaytime则是间隔的时间，以毫秒为单位。

　　倒计时定时器就是在指定时间后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，其区别在于：前者只是作用一次，而后者则不停地作用。

　　倒计时定时器一般用于页面上只需要触发一次的的情况，比如点击某按钮后页面在一定时间后跳转到相应的站点，也可以用于判断一个浏览者是不是你的站点上的“老客”，如果不是，你就可以在5秒或者10秒后跳转到相应的站点，然后告诉他以后再来可以在某个地方按某一个按钮就可以快速进入。

　　循环定时器一般用于站点上需要从复执行的效果，比如一个javascript的滚动条或者状态栏，也可以用于将页面的背景用飞雪的图片来表示。这些事件需要隔一段时间运行一次。

　　有时候我们也想去掉一些加上的定时器，此时可以用clearTimeout(timename) 来关闭倒计时定时器，而用clearInterval(timename)来关闭循环定时器。
    带参数的方法不写符号即可，如：setTimeout(hello(name),2000);但计时不起作用!

例1：
<SCRIPT LANGUAGE="JavaScript">
setTimeout("confirm(‘123456‘)",1000);
</SCRIPT>

<script language="JavaScript" type="text/javascript">

function count() {
    setTimeout("alert(‘三秒到了‘)",3000)
}

</Script>

<INPUT TYPE="button" VALUE=" 计时开始" onClick="count()">

例2：
<Script><script language="JavaScript" type="text/javascript">

var sec = 0;
timerID = setInterval("count()",1000);

function count() {
    num.innerHTML = sec++;
}

</Script>

停留时间：
<FONT ID="num" FACE="impact">0</FONT>秒钟
<INPUT TYPE="button" VALUE="停止" onClick="clearInterval(timerID)">

例3：
<script language="JavaScript" type="text/javascript">

var str = "这是一个在线拍卖的网站，请尽情血拼吧！";
var seq = 0;

function scroll() {
    msg = str.substring(0, seq+1);
    banner.innerHTML = msg;
    seq++;
    if (seq >= str.length) seq = 0;
}

</Script>

<Body onLoad="setInterval(‘scroll()‘,500)">
<FONT ID="banner"></FONT>
</Body>

无论是window.setTimeout 还是window.setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必需要带参数,这就需要想方法解决.
例如对于函数hello(_name),它用于针对用户名显示欢迎信息:

代码如下:

var userName="Tony";
//根据用户名显示欢迎信息
function hello(_name){
alert("hello,"+_name);
}

这时,如果企图使用以下语句来使hello函数延迟3 秒执行是不可行的:
window.setTimeout(hello(userName),3000);
这将使hello函数立即执行,并将返回值作为调用句柄传递给setTimeout 函数,其结果并不是程序需要的.而使用字符串形式可以达到想要的结果:
window.setTimeout("hello(userName)",3000);
这里的字符串是一段JavaScript 代码,其中的userName 表示的是变量.但这种写法不够直观,而且有些场合必须使用函数名,下面用一个小技巧来实现带参数函数的调用:

代码如下: