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 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
js实现前端界面导航栏下拉列表
Aug 27 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 GUID生成函数和类
2014/03/10 PHP
关于PHP开发的9条建议
2015/07/27 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
jQuery自定义添加"$"与解决"$"冲突的方法
2015/01/19 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript制作简单的日历效果
2016/03/10 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
深入浅出 jQuery中的事件机制
2016/08/23 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
自我评价的正确写法
2013/09/19 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
周年庆促销方案
2014/03/15 职场文书
培训班主持词
2014/03/28 职场文书
5s标语大全
2014/06/23 职场文书
工作求职信
2014/07/04 职场文书
计算机实训报告总结
2014/11/05 职场文书
统计员岗位职责
2015/02/11 职场文书
就业推荐表院系意见
2015/06/05 职场文书
Nginx配置使用详解
2022/07/07 Servers