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中字符串拼接需注意的问题
Jul 13 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
jQuery原生的动画效果
Jul 10 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
简单的js表格操作
Sep 24 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
Vuex入门到上手教程
Jun 20 Javascript
详解react组件通讯方式(多种)
May 06 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 SPL标准库之接口(Interface)详解
2015/05/11 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
2011/06/20 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
jquery制作LED 时钟特效
2015/02/01 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
python实现textrank关键词提取
2018/06/22 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
Python TKinter如何自动关闭主窗口
2020/02/26 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
python元组打包和解包过程详解
2021/08/02 Python