Javascript中setTimeOut和setInterval的定时器用法


Posted in Javascript onJune 12, 2015

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引擎中,实际应用中复杂的任务中需要排队执行,这就可能导致定时器时间不准,这个问题在大型应用中需要考虑,本文不做深究。

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

Javascript 相关文章推荐
Javascript 继承机制的实现
Aug 12 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
jQuery插件datepicker 日期连续选择
Jun 12 #Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 #Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 #Javascript
JavaScript中string对象
Jun 12 #Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 #Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 #Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 #Javascript
You might like
无线电的诞生过程
2021/03/01 无线电
MySql中正则表达式的使用方法描述
2008/07/30 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
php常用图片处理类
2016/03/16 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
Vue将props值实时传递 并可修改的操作
2020/08/09 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
python查询mysql,返回json的实例
2018/03/26 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python 产生token及token验证的方法
2018/12/26 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
html5的canvas方法使用指南
2014/12/15 HTML / CSS
秋游活动策划方案
2014/02/16 职场文书
财务人员担保书
2014/05/13 职场文书
介绍信格式样本
2015/05/05 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
mysql 获取时间方式
2022/03/20 MySQL
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫