Javascript中setTimeOut和setInterval的定时器用法

Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。也就是说setTimeout()只执行一次,setInterval()可以执行多次。两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数。
setTimeOut用法
setTimeout函数的用法如下:

复制代码 代码如下:

var timeoutID = window.setTimeout(func, [delay, param1, param2, ...]);
var timeoutID = window.setTimeout(code, [delay]);

timeoutID:定时器ID号,它可以在clearTimeout()函数中被用来清除定时器。
func:被执行的函数。
code:(替代的语法)一个被执行的代码串。
delay:延迟的时间,单位毫秒。如果没有指定,默认为0。

我们可以使用window.setTimeout或setTimeout,两个写法基本一样,只不过window.setTimeout将setTimeout函数作为全局window对象的一个属性来引用。

应用示例:

复制代码 代码如下:

function timeout(){
    document.getElementById('res').innerHTML=Math.floor(Math.random()*100 + 1);
}
setTimeout("timeout()",5000);

代码执行时,5秒后调用timeout()函数,点击看演示。
setInterval用法
setInterval函数的参数及用法和setTimeout函数一样,请参照上文的setTimeout函数的用法介绍。不同的是,setInterval每隔一定的时间执行当中的func或code代码。
应用示例:

复制代码 代码如下:

var tt = 10;
function timego(){
    tt--;
    document.getElementById("tt").innerHTML = tt;
    if(tt==0){ 
        window.location.href=#>         return false;
    }
}
var timer = window.setInterval("timego()",1000);

函数timego()定义了页面元素#tt显示的内容,当tt等于0时,页面定向到首页。然后我们定义一个定时器timer,使用setInterval()每隔1秒调用一次timego()。这样timego会执行10次,每次数字tt会减1,直到为0。那么如果想停止定时器,可以使用以下代码:

复制代码 代码如下:

window.clearInterval(timer); 

代码执行时,10秒后页面跳转到首页

其实setTimeout()也可以实现每隔一段时间重复执行某个函数,但我们还是简单的区别使用setTimeOut和setInterval。另外javascript都是以单线程的方式运行于浏览器的javascript引擎中,实际应用中复杂的任务中需要排队执行,这就可能导致定时器时间不准,这个问题在大型应用中需要考虑,本文不做深究。

以上所述就是本文的全部内容了,希望大家能够喜欢。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下: 复制代码 代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" head meta http-equiv
一、什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / script/jquery.js http:// (协议号) www (子域名) google (主域名) 8080 (端口号) script/jquery.js (请求的地址) * 当协议、子域名、主域名、端口号中任意一各不相同时,都算不同的“域”。 * 不同的域之间相互请求资源,就叫“跨域”。 比如: http://www.abc.com/index.html 请求 http://www.def
本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法。分享给大家供大家参考。具体如下: index.html页面: div class="warning"h2Native web camera streaming (getUserMedia) is not supported in this browser./h2/divdiv class="container" h3Current filter is: None/h3 buttonClick here to change video fil
我遇到的问题是:url里的参数内容包含符合,我有两种方法解决 其一方法是:在页面用JS转码 ,例子如下(前端处理) 复制代码 代码如下: a href=#>script language="javascript" function test(a,b){ alert("test"); location.href=#>} /script 其二方法是:在后端处理 1jsp: 复制代码 代码如下: a href=#> 2java bean: group 复制代码 代码如下: String cn;//要显示的CN S
复制代码 代码如下: /*7536-7646*/ animate: function( prop, speed, easing, callback ) { if ( jQuery.isEmptyObject( prop ) ) { return this.each( optall.complete ); } //#7864行this.options.complete.call( this.elem )使得其可以不断的连续执行动画,比如$(‘selector').animate({prop1},speed1
废话不多说,直接奉上代码 JS script type="text/javascript"function Sum(arg1,arg2){ //数值加法函数var sarg1 = new String(arg1); //将传入的参数转为字符串以便进行参数检查var sarg2 = new String(arg2); //将参数2转为字符类型if( (sarg1=="")||(sarg2=="") ) //确保参数不为空{var e0 = new Error(); //当有参数为空则抛出异常e0.Seria
本文实例讲述了基于jQuery实现的旋转彩圈。分享给大家供大家参考。具体实现方法如下: !DOCTYPE htmlhtmlheadscript src="jquery-1.7.1.min.js"/scriptscriptfor(var i=0;i100000;i++){if(i%4==0)setTimeout("$('#div1').css({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'
当今 JavaScript 大行其道,各种应用对其依赖日深。web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学习和深入理解。所以,经常出现的情况是,很多做了多年 JS 开发的程序员对闭包、函数式编程、原型总是说不清道不明,即使使用了框架,其代码组织也非常糟糕。这都是对原生 JavaScript 语言特性理解不够的表现。要掌握好 JavaScript,首先一点是必须摒弃一些其他高级语言如 Java、C# 等类式面向对象思维的
具体如何屏蔽更多的快捷键可以自行google搜索。 这里要说的是如何屏蔽后去执行自定义的事件。 这里为了方便使用的Kibo做例子,使用google搜索出来的结果一般都是javascript原生实现,很简单的,这里不做介绍。 这里是实现了在一个textarea中enter进行保存的例子,屏蔽掉了原来的回车事件。 代码如下: 复制代码 代码如下: //键盘监听 var areaKey = new Kibo($("#aac010")[0]); areaKey.down('enter',doSave); funct
在这之前我们比较值使用两等号 “==” 或 三等号“===”, 三等号更加严格,只要比较两方类型不同立即返回false。 另外,有且只有一个值不和自己相等,它是NaN 现在ES6又加了一个Object.is,让比较运算的江湖更加混乱。多数情况下Object.is等价于“===”,如下 1 === 1 // trueObject.is(1, 1) // true 'a' === 'a' // trueObject.is('a', 'a') // true true === true // trueObjec