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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
微信小程序实现选择地址省市区三级联动
Jun 21 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
PHP自动生成月历代码
2006/10/09 PHP
php单件模式结合命令链模式使用说明
2008/09/07 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP定时任务延缓执行的实现
2014/10/08 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
document.all与WEB标准
2020/05/13 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
浅谈React之状态(State)
2018/09/19 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python+Wordpress制作小说站
2017/04/14 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
保安员岗位职责
2013/11/17 职场文书
车间调度岗位职责
2013/11/30 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
质量月活动策划方案
2014/03/10 职场文书
2014年妇委会工作总结
2014/12/10 职场文书
会计人员岗位职责
2015/02/03 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书