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 MVC 样式框架
Mar 24 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
vue最简单的前后端交互示例详解
Oct 11 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
Sep 04 Javascript
微信小程序实现签到弹窗动画
Sep 21 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
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
php 常用的系统函数
2017/02/07 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
锋利的jQuery jQuery中的DOM操作
2010/03/21 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
Python连接phoenix的方法示例
2017/09/29 Python
Python定时器实例代码
2017/11/01 Python
Python实现基于POS算法的区块链
2018/08/07 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
Django 自动生成api接口文档教程
2019/11/19 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
波兰珠宝品牌:YES
2019/08/09 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
工厂仓管员岗位职责范本
2014/07/17 职场文书
公司踏青活动方案
2014/08/16 职场文书
员工趣味活动方案
2014/08/27 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
2014年采购工作总结
2014/11/20 职场文书
护士年终考核评语
2014/12/31 职场文书
离职证明格式样本
2015/06/12 职场文书
汶川大地震感悟
2015/08/10 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
python数字转对应中文的方法总结
2021/08/02 Python