Javascript setTimeout setInterval使用详解
From:http://hi.baidu.com/hongz1125/blog/item/8fcc49a951f73bf61f17a202.html
setTimeOut setInterval
Internet的基本结构是建立在一系列静态状态上&＃xff0c;这些静态状态一般都称做页面。从第13章可以看到&＃xff0c;DHTML打破了这个模型&＃xff0c;为了响应用户的动作&＃xff0c;DHTML在相同的界面上创建了很多独立的状态。本章将就这种动态理念进行更深一步的探讨。 有了Javascript&＃xff0c;网页就可以不再是一堆离散状态的集合&＃xff0c;借助于时间&＃xff08;time&＃xff09;和动作&＃xff08;motion&＃xff09;&＃xff0c;可以创建出真正的动态页面。对象可以随着时间而改变&＃xff0c;可以在页面上顺畅地运动&＃xff0c;而且用户还可以像在实际生活中与事物进行交互那样对对象进行操作。目前好多操作在桌面应用程序中都已经用滥了&＃xff0c;如拖曳对象或者滑动控件&＃xff0c;这些都是很好的桌面应用的例子&＃xff0c;不过这些操作现在还没有被集成到Web中去。
在接下来的方法中&＃xff0c;大家可以学到在页面上移动对象所涉及的基本步骤&＃xff0c;
然后还可以应用这些基本的知识来创建一个实时交互系统&＃xff0c;如滑动控件和拖曳界面。
14.1 setTimeOut和setInterval的使用
这两个方法都可以用来实现在一个固定时间段之后去执行Javascript。
不过两者各有各的应用场景。
方法
实际上&＃xff0c;setTimeout和setInterval的语法相同。它们都有两个参数&＃xff0c;一个是将要执行的代码字符串&＃xff0c;还有一个是以毫秒为单位的时间间隔&＃xff0c;当过了那个时间段之后就将执行那段代码。
不过这两个函数还是有区别的&＃xff0c;setInterval在执行完一次代码之后&＃xff0c;经过了那个固定的时间间隔&＃xff0c;它还会自动重复执行代码&＃xff0c;而setTimeout只执行一次那段代码。
虽然表面上看来setTimeout只能应用在on-off方式的动作上&＃xff0c;不过可以通过创建一个函数循环重复调用setTimeout&＃xff0c;以实现重复的操作&＃xff1a;
File: settimeout_setinterval.js
showTime();
function showTime()
{
var today &＃61; new Date();
alter("The time is:"&＃43;today.toString());
setTimeout("showTime()", 5000);
}
一旦调用了这个函数&＃xff0c;那么就会每隔5秒钟就显示一次时间。
如果使用setInterval&＃xff0c;则相应的代码如下所示&＃xff1a;
File: settimeout_setinterval2.js
setInterval("showTime()", 5000);
function showTime()
{
var today &＃61; new Date();
alert("The time is:"&＃43;today.toString());
}
这两种方法可能看起来非常像&＃xff0c;而且显示的结果也会很相似&＃xff0c;
不过两者的最大区别就是&＃xff0c;setTimeout方法不会每隔5秒钟就执行一次showTime函数&＃xff0c;它是在每次调用setTimeout后过去5秒钟&＃xff0c;再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完&＃xff0c;那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚&＃xff0c;它只是简单地每隔一定时间就重复执行一次那个函数。
如果要求在每隔一个固定的时间间隔后就精确地执行某动作&＃xff0c;那么最好使用setInterval&＃xff0c;而如果不想由于连续调用产生相互干扰的问题&＃xff0c;尤其是每次函数的调用需要繁重的计算以及很长的处理时间&＃xff0c;那么最好使用setTimeout。
函数指针的使用
两个计时函数中的第一个参数是一段代码的字符串&＃xff0c;其实该参数也可以是一个函数指针&＃xff0c;不过Mac下的IE5对此不支持。&＃xff08;张立斌&＃xff1a;不要让自己的代码刻意支持IE5&＃xff09;
如果用函数指针作为setTimeout和setInterval函数的第二个参数&＃xff0c;
那么它们就可以去执行在另外定义的函数了&＃xff1a;
setTimeout(showTime, 500);
function showTime()
{
var today &＃61; new Date();
alert("The time is:"&＃43;today.toString());
}
另外&＃xff0c;匿名函数还可以声明为内联函数&＃xff1a;
&＃xff08;张立斌&＃xff1a;其实&＃xff0c;这里只是使用匿名函数&＃xff0c;没有内联&＃xff09;
setTimeout(function()
{
var today &＃61; new Date();
alert("The time is:"&＃43;today.toString();
},
500);
讨论
如果对计时函数不加以处理&＃xff0c;那么setInterval将会持续执行相同的代码&＃xff0c;一直到浏览器窗口关闭&＃xff0c;或者用户转到了另外一个页面为止。不过还是有办法
可以终止setTimeout和setInterval函数的执行。
当setInterval调用执行完毕时&＃xff0c;它将返回一个timer ID&＃xff0c;将来便可以利用该值对计时器进行访问&＃xff0c;如果将该ID传递给clearInterval&＃xff0c;便可以终止那段被
调用的过程代码的执行了&＃xff0c;具体实现如下&＃xff1a;
File:settimeout_setinterval3.js(excerpt)
var intervalProcess &＃61; setInterval("alert(&＃39;GOAL!&＃39;)", 3000);
var stopGoalLink &＃61; document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
clearInterval(intervalProcess);
}
只要点击了stopGoalLink&＃xff0c;不管是什么时候点&＃xff0c;intervalProcess都会被取消掉&＃xff0c;以后都不会在继续反复执行intervalProcess。如果在超时时间段内就取消setTimeout&＃xff0c;那么这种终止效果也可以在setTimeout身上实现&＃xff0c;具体实现如下&＃xff1a;
File:settimeout_setinterval4.js(excerpt)
var timeoutProcess &＃61; setTimeout("alert(&＃39;GOAL!&＃39;)", 3000);
var stopGoalLink &＃61; document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal()
{
clearTimeout(timeoutProcess);
}
京公网安备 11010802041100号