Javascript中setTimeOut和setInterval的定时器用法

 更新时间:2015年06月12日 11:36:03   投稿:hebedich  
这篇文章主要介绍了Javascript中setTimeOut和setInterval的定时器用法的相关资料,需要的朋友可以参考下

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引擎中,实际应用中复杂的任务中需要排队执行,这就可能导致定时器时间不准,这个问题在大型应用中需要考虑,本文不做深究。

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    由于项目上的需要,要用一个iframe高度自适应的功能,在google上搜了很久,找了一些修改了下。大家可以测试下。
    2010-03-03
  • JavaScript实现手风琴效果

    JavaScript实现手风琴效果

    这篇文章主要为大家详细介绍了JavaScript实现手风琴效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • JavaScript常用的弹出广告及背投广告实现方法

    JavaScript常用的弹出广告及背投广告实现方法

    这篇文章主要介绍了JavaScript常用的弹出广告及背投广告实现方法,实例分析了弹出广告与背投广告的实现原理与相关技巧,需要的朋友可以参考下
    2015-02-02
  • JavaScript中html画布的使用与页面存储技术详解

    JavaScript中html画布的使用与页面存储技术详解

    这篇文章主要介绍了JavaScript中html画布的使用与页面存储技术,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • javascript读写json示例

    javascript读写json示例

    JSON是一种简单的数据格式,比xml更轻巧,在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包,下面有个示例,大家可以参考下
    2014-04-04
  • CodeMirror js代码加亮使用总结

    CodeMirror js代码加亮使用总结

    一个基于JavaScript的代码编辑器,CodeMirror支持大量语言的语法高亮,也包括css,html,js等的高亮显示。此外,CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、代码自动格式等
    2017-03-03
  • 前端常用的几种加密方法实例demo

    前端常用的几种加密方法实例demo

    这篇文章主要给大家介绍了关于前端常用几种加密方法的相关资料,需要的朋友可以参考下
    2024-01-01
  • firefo xml 读写实现js代码

    firefo xml 读写实现js代码

    firefo xml 读写实现 不过要是你的xml要编码成功还得在str前面加上xml头,千万别忘了啊。
    2009-06-06
  • web前端页面生成exe可执行文件的方法

    web前端页面生成exe可执行文件的方法

    这篇文章给大家介绍了Electron 怎么将网页打包成桌面应用(web前端页面怎么生成exe可执行文件),感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-02-02
  • 最好用的二级联动 原生js实现你值得拥有

    最好用的二级联动 原生js实现你值得拥有

    二级联动效果,实现方法有很多,不过其他文章中介绍的都比较笼统,在本文有一个详细的实现过程,使用原生js很容易理解,希望大家可以参考下
    2013-09-09

最新评论