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中的Location地址对象
Jan 16 Javascript
Prototype Class对象学习
Jul 19 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
javascript json字符串到json对象转义问题
Jan 22 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 定界符格式引起的错误
2011/05/24 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
php使用websocket示例详解
2014/03/12 PHP
微信API接口大全
2015/04/15 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
jquery中change()用法实例分析
2015/02/06 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
微信小程序模板之分页滑动栏
2017/02/10 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[41:52]2018DOTA2亚洲邀请赛3月29日小组赛B组Effect VS Secret
2018/03/30 DOTA
实例Python处理XML文件的方法
2015/08/31 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
python3+PyQt5图形项的自定义和交互 python3实现page Designer应用程序
2020/07/20 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
python上selenium的弹框操作实现
2020/07/13 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
精彩的推荐信范文
2013/11/26 职场文书
期末个人总结范文
2015/02/13 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
mysql如何查询连续记录
2022/05/11 MySQL