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 相关文章推荐
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
Node.js插件安装图文教程
May 06 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
微信网页登录逻辑与实现方法
Apr 29 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 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
Yii框架中memcache用法实例
2014/12/03 PHP
php从字符串创建函数的方法
2015/03/16 PHP
php简单防盗链实现方法
2015/07/29 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
繁简字转换功能
2006/07/19 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
JS判断一个数是否是水仙花数
2017/06/11 Javascript
Angular排序实例详解
2017/06/28 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
安全生产检讨书
2014/01/21 职场文书
施工安全生产承诺书
2014/05/23 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
昆虫记读书笔记
2015/06/26 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书