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 设置某DIV区域内的checkbox复选框
Nov 30 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
Nov 02 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
初学vue出现空格警告的原因及其解决方案
Oct 31 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
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
第二节 对象模型 [2]
2006/10/09 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
摘自启点的main.js
2008/04/20 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
利用vue + element实现表格分页和前端搜索的方法
2017/12/25 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
使用Python的Django框架实现事务交易管理的教程
2015/04/20 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Python内置模块logging用法实例分析
2018/02/12 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python 私有化操作实例分析
2019/11/21 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
企业演讲比赛主持词
2014/03/18 职场文书
车贷收入证明范本
2014/09/14 职场文书
婚宴主持词
2015/06/30 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Python Pandas解析读写 CSV 文件
2022/04/11 Python
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js