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 13 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
JavaScript 巧学巧用
May 23 Javascript
使用Angular CLI进行Build(构建)和Serve详解
Mar 24 Javascript
Mac下安装vue
Apr 11 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 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中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
smarty简单分页的实现方法
2014/10/27 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
教你php如何实现验证码
2016/01/20 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JavaScript给url网址进行encode编码的方法
2015/03/18 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
Python环境变量设置方法
2016/08/28 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
python绘制趋势图的示例
2020/09/17 Python
BeautifulSoup中find和find_all的使用详解
2020/12/07 Python
python中常用的数据结构介绍
2021/01/12 Python
西部世纪.net笔试题面试题
2014/04/03 面试题
初婚未育证明
2014/01/15 职场文书
班主任个人工作反思
2014/04/28 职场文书
村级换届选举方案
2014/05/10 职场文书
教育见习报告范文
2014/11/03 职场文书
在CSS中使用when/else的方法
2022/01/18 HTML / CSS