js-定时任务setInterval,setTimeout,clearInterval,clearTimeout

setInterval()循环执行相应的方法

 <script type="text/javascript">
      setInterval("myInterval()",1000);//1000为1秒钟
       function myInterval()
       {
            alert(‘aaaaaaaaa‘);
        }
 </script>

setTimeout()规定时间后执行

1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setTimeout 运用在延迟一段时间,再进行某项操作。
setTimeout("",time) 设置一个超时对象
2.setInterval(expression,delayTime),每个DelayTime,都将执行Expression.常常可用于刷新表达式.
setInterval("",time) 设置一个超时对象
SetInterval为自动重复,setTimeout不会重复。
3.1clearTimeout(对象) 清除已设置的setTimeout对象
3.2clearInterval(对象) 清除已设置的setInterval对象

setTimeout和setInterval的使用

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景

方 法

际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。

虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作:

showTime();
function showTime(){
    var today = new Date();
    alert("The time is: " + today.toString());
    setTimeout("showTime()", 5000);
}

一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:

setInterval("showTime()", 5000);
function showTime(){
    var today = new Date();
    alert("The time is: " + today.toString());
}

这两种方法可能看起来非常像,而且显示的结果也会很相似,不过两者的最大区别就是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。

如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

讨 论

如果对计时函数不加以处理,那么setInterval将会持续执行相同的代码,一直到浏览器窗口关闭,或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

当setInterval调用执行完毕时,它将返回一个timer ID,将来便可以利用该值对计时器进行访问,如果将该ID传递给clearInterval,便可以终止那段被调用的过程代码的执行了,具体实现如下:

var intervalProcess = setInterval("alert(‘GOAL!‘)", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal(){
   clearInterval(intervalProcess);
}

只要点击了stopGoalLink,不管是什么时候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行intervalProcess。

如果在超时时间段内就取消setTimeout,那么这种终止效果也可以在setTimeout身上实现,具体实现如下:

var timeoutProcess = setTimeout("alert(‘GOAL!‘)", 3000);
var stopGoalLink = document.getElementById("stopGoalLink");
attachEventListener(stopGoalLink, "click", stopGoal, false);
function stopGoal(){
   clearTimeout(timeoutProcess);
}

10秒自动跳转案例

<div class="jf_register">
    <h2>您好,欢迎光临<fmt:message key="b2cShowName"/>!<a class="blue" href="<%=path%>/LoginRegist_turnToLogin">请登录</a></h2>
</div>
<div class="jf_register_banner">注册成功</div>
<div class="jf_password">
<ul>
<li> 感谢您选择<fmt:message key="b2cShowName"/>,</li><li>您的账号<span>
<font color=red><strong>${param.bussinessId}</strong></font></span>已经注册成功。 </li>
<li>系统将会在<strong id="endtime"></strong>秒后跳转到登录页!
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a class="blue" href="<%=path%>/LoginRegist_turnToLogin">直接登录</a></li>
</ul>
</div>
<div class="jf_loginfooter"><fmt:message key="copyright"/>&nbsp;版权所有&nbsp;|
<a href="Login_loginHelpTips">联系我们</a><fmt:message key="copyrightIcp"/></div>

<script type="text/javascript">
var i = 10;
function remainTime(){
    if(i==0){
        location.href=‘<%=path%>‘;
    }
    document.getElementById(‘endtime‘).innerHTML=i--;
    setTimeout("remainTime()",1000);
}
remainTime();
</script>
时间: 2024-10-03 19:58:19

js-定时任务setInterval,setTimeout,clearInterval,clearTimeout的相关文章

setInterval setTimeout clearInterval

setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). //第一次load的时候就先刷新一次 setTimeout( function() { $.get('<%= sdn_topo_vnets_url%>', function( data ) { $( "#time_div" ).replaceWith( data ); var max_len = 0; var mi

Javascript 的定时器 setInterval,setTimeout,clearInterval

今天开通博客.来1个.哇哈哈哈~~ 今天本来想复习BOM的看到定时器也算DOM一种 ?(是这样吗).分享一下 参考源于:八神吻你 http://www.cnblogs.com/lmfeng/archive/2011/06/24/2089237.html 单次定时器即执行 1 //单次定时器即执行 2 3 setInterval(console.log(1),1000); //执行1次 4 5 //------------------------------------ 6 7 var a = f

JS中setInterval()和clearInterval()的使用以及注意事项 (实用,赞)

setInterval(): 间隔指定的毫秒数不停地执行指定的代码,定时器 clearInterval(): 用于停止 setInterval() 方法执行的函数代码 使用方法:setInterval(code,millisec),两个参数都是必须的,第一个参数为要调用的函数或要执行的代码串.第二个参数为周期性执行或调用 code 之间的时间间隔,以毫秒计. clearInterval(id_of_setinterval),参数是必须的,为setInterval返回的ID值 示例: <body>

js中setInterval与setTimeout用法

setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). 两种调用函数的写法:

JS里设定延时:js中SetInterval与setTimeout用法

js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的se

js中setInterval与setTimeout用法 实现实时刷新每秒刷新

setTimeout 定义和用法:  setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法:  setTimeout(code,millisec) 参数:  code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示:  setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). 两种调用函数的

js中setInterval和setTimeout区别和用法

setTimeout setTimeout() //- 在指定时间后执行代码clearTimeout() //- 取消 setTimeout(),clearTimeout()方法的参数必须是由setTimeout()返回的ID值. 注意: setTimeout() 和 clearTimeout() 都是HTML DOM 的 Window 对象的函数. 用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式.     语法: setTimeout(code,millisec)

JS中的setTimeout和setInterval的区别

学了许久的javascript,发现其中非常常用的两个函数,就是setInterval和setTimeout函数,对这两个函数的理解,有时觉得很模糊,经过多次的试验,终于对它有了比较深入的了解.定义,setInterval()-- 间隔指定的毫秒数不停地执行指定的代码.setTimeout,延迟两秒调用函数,这个定义非常的简单,但是它并不像字面意思上那么的简 很多人都觉得这两个方法差不多,但是,实际上,他们差的很远呢     因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指

JS中setInterval、setTimeout不能传递带参数的函数的解决方案

在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,接下来为大家介绍具体的解决方法 在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数, 这就需要想方法解决. 一.采用字符串形式:——(缺陷)参数不能被周期性改变 setInterval("foo(id)",1000); 二.匿名函数包装 (推荐) window.setInterval(

实现Animating使用requestAnimationFrame,尽量不用setInterval,setTimeout

requestAnimationFrame(基于脚本的动画的控制),最初是在某html5教程里看到的,是用来代替setInterval(),setTimeout()进行绘制动画更平滑更高效的方法. requestAnimationFrame 方法可以解决丢失帧的问题,因为它使应用能够在浏览器需要更新页面显示时(而且仅在这种情况下)获得通知. 因此,应用可与浏览器的绘制时间间隔保持完全一致,并且仅使用适量的资源.从 setTimeout 切换到 requestAnimationFrame 非常容易