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 变量命名规则
Sep 23 Javascript
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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代码
2010/08/08 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
2020/03/30 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
如何使用python爬取csdn博客访问量
2016/02/14 Python
python素数筛选法浅析
2018/03/19 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
几款好用的python工具库(小结)
2020/10/20 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
资深地理教师自我评价
2013/09/21 职场文书
面试后的英文感谢信
2014/02/01 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
总经理检讨书范文
2015/02/16 职场文书
物业公司管理制度
2015/08/05 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书