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 apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
初识Javascript小结
Jul 16 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 Javascript
vue实现滚动鼠标滚轮切换页面
Dec 13 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 Session机制简介及用法
2014/08/19 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
给js文件传参数(详解)
2014/07/13 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
2015/09/17 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python实现括号匹配的思路详解
2018/08/23 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Python中pass的作用与使用教程
2020/11/13 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
Unix如何添加新的用户
2014/08/20 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
餐饮营销方案
2014/02/23 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
个人借款担保书
2014/04/02 职场文书
公司周年庆活动方案
2014/08/25 职场文书
毕业生学校组织意见
2015/06/04 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript