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 相关文章推荐
JS分割字符串并放入数组的函数
Jul 04 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
Oct 20 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
Jan 13 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 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
PHP 高手之路(一)
2006/10/09 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
javascript 回调函数详解
2014/11/11 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python通过smpt发送邮件的方法
2015/04/30 Python
python数组过滤实现方法
2015/07/27 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
python装饰器代替set get方法实例
2019/12/19 Python
python进行参数传递的方法
2020/05/12 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
HTML5+CSS3应用详解
2014/02/24 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
Java模拟试题
2014/11/10 面试题
单身申明具结书
2015/02/26 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript