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判断元素为数字的奇异写法分享
Aug 01 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
Jun 01 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 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字符串 ==比较运算符的副作用
2009/10/21 PHP
php中echo()和print()、require()和include()等易混淆函数的区别
2012/02/22 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
一段实用的php验证码函数
2016/05/19 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
JS与框架页的操作代码
2010/01/17 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
2016/08/10 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
Vue Router去掉url中默认的锚点#
2018/08/01 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
解决Python对齐文本字符串问题
2019/08/28 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
护理专科毕业推荐信
2013/11/10 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
英语读书笔记
2015/07/02 职场文书
小学生安全教育主题班会
2015/08/12 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python