`
ThinkTech
  • 浏览: 3387 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

setTimeout和setInterval的区别

    博客分类:
  • jsp
阅读更多

 

setTimeout和setInterval的区别

实际上,setTimeout和setInterval的语法相同。它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码。

不过这两个函数还是有区别的,setInterval在执行完一次代码之后,经过了那个固定的时间间隔,它还会自动重复执行代码,而setTimeout只执行一次那段代码。

 

虽然表面上看来setTimeout只能应用在on-off方式的动作上,不过可以通过创建一个函数循环重复调用setTimeout,以实现重复的操作:

 

showTime();   

function showTime()   

{   

    var today = new Date();   

     alert("The time is: " + today.toString());   

     setTimeout("showTime()", 5000);   

一旦调用了这个函数,那么就会每隔5秒钟就显示一次时间。如果使用setInterval,则相应的代码如下所示:

 

setInterval("showTime()", 5000);   

function showTime()   

{   

    var today = new Date();   

     alert("The time is: " + today.toString());   

 

 

 

这两种方法可能看起来非常像,而且显示的结果也会很相似,不过两者的最大区别就 是,setTimeout方法不会每隔5秒钟就执行一次showTime函数,它是在每次调用setTimeout后过5秒钟再去执行showTime函 数。这意味着如果showTime函数的主体部分需要2秒钟执行完,那么整个函数则要每7秒钟才执行一次。而setInterval却没有被自己所调用的 函数所束缚,它只是简单地每隔一定时间就重复执行一次那个函数。

 

如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout。

 

 

 

两个计时函数中的第一个参数是一段代码的字符串,其实该参数也可以是一个函数指针,不过Mac下的IE 5对此不支持。

 

如果用函数指针作为setTimeout和setInterval函数的第二个参数,那么它们就可以去执行一个在别处定义的函数了:

 

setTimeout(showTime, 500);

 

function showTime()

 

{

 

    var today = new Date();

 

    alert("The time is: " + today.toString());

 

}

 

另外,匿名函数还可以声明为内联函数:

 

setTimeout(function(){var today = new Date();

 

     alert("The time is: " + today.toString());}, 500);

 

讨 论

如果对计时函数不加以处理,那么setInterval将会持续执行相同的代码,一直到浏览器窗口关闭,或者用户转到了另外一个页面为止。不过还是有办法可以终止setTimeout和setInterval函数的执行。

 

当setInterval调用执行完毕时,它将返回一个timer ID,将来便可以利用该值对计时器进行访问,如果将该ID传递给clearInterval,便可以终止那段被调用的过程代码的执行了,具体实现如下:

 

var intervalProcess = setInterval("alert('GOAL!')", 3000);   

var stopGoalLink = document.getElementById("stopGoalLink");   

attachEventListener(stopGoalLink, "click", stopGoal, false);   

function stopGoal()   

{   

     clearInterval(intervalProcess);   

 

只要点击了stopGoalLink,不管是什么时候点击,intervalProcess都会被取消掉,以后都不会再继续反复执行 intervalProcess。如果在超时时间段内就取消setTimeout,那么这种终止效果也可以在setTimeout身上实现,具体实现如 下:

 

var timeoutProcess = setTimeout("alert('GOAL!')", 3000);   

var stopGoalLink = document.getElementById("stopGoalLink");   

attachEventListener(stopGoalLink, "click", stopGoal, false);   

function stopGoal()   

{   

    clearTimeout(timeoutProcess);   

}  


 

 

 

分享到:
评论

相关推荐

    Javascript中, setTimeout() 和 setInterval() 的方法

    在JavaScript编程中,`setTimeout()`和`setInterval()`是两个非常关键的函数,它们用于实现异步编程,特别是在处理动画、定时任务或者延迟执行代码时不可或缺。这两个函数都是全局对象`window`的方法,它们的区别...

    JS中的setTimeout和setInterval的区别JS中的setTimeout和setInterval的区别

    通过以上的分析可以看出,尽管`setTimeout`与`setInterval`都可以用来控制代码的执行时间,但它们的应用场景和执行方式存在本质的区别。正确理解和运用这两个函数对于提高JavaScript程序的性能和用户体验至关重要。

    关于JS定时器(setTimeout setInterval)定时不准问题1

    在JavaScript中,setTimeout和setInterval是两个基本的定时器函数,用于实现延迟执行或循环执行某个函数。然而,这两个函数在执行时往往和我们设置的延迟时间有出入。本文将深入探讨JS定时器的执行机制,分析why ...

    Javascript定时器(二)——setTimeout与setInterval

    在这个主题中,我们将深入探讨`setTimeout`和`setInterval`这两个核心定时器函数,它们在JavaScript中的应用以及它们之间的区别。 首先,`setTimeout`函数用于在指定的毫秒数后调用一个函数或执行一段代码。它的...

    javascript之setTimeOut和setInterval的用法

    使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间,再进行某项操作。

    Javascript中setTimeOut和setInterval的定时器用法

    Javascript的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...

    给c#添加SetTimeout和SetInterval函数.docx

    ### 给C#添加SetTimeout和SetInterval函数 在日常的软件开发过程中,我们经常会遇到需要定时执行某些任务的情况。JavaScript 提供了 `setTimeout` 和 `setInterval` 这两个非常方便的函数来处理这样的需求。然而,...

    JavaScript中setTimeout和setInterval函数的传参及调用_.docx

    JavaScript 中 setTimeout 和 setInterval 函数的传参及调用 在 JavaScript 中,setTimeout 和 setInterval 函数都是用于在指定的时间点执行某个函数的,但是它们的传参方式和调用方式却有所不同。 setTimeout ...

    javascript setTimeout和setInterval计时的区别详解

    JavaScript中的定时器函数setTimeout和setInterval都用于延迟执行代码,但它们的工作方式和用法有所不同。以下是关于这两个函数的详细解析: 1. setTimeout函数的基本概念和用法: setTimeout是JavaScript中的一个...

    快速掌握Node.js中setTimeout和setInterval的使用方法

    今天先学下setTimeout和setInterval的使用。 一、setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法。当调用setTime()时回调函数会在...

    javascript setTimeout和setInterval 的区别

    JavaScript中的`setTimeout`和`setInterval`是两个重要的定时器函数,它们都属于全局`window`对象的方法,常用于在指定的时间后执行某段代码或周期性地重复执行某段代码。然而,它们的工作机制和用途有所不同。 1. ...

    setTimeout和setInterval的区别你真的了解吗?

    setTimeout和setInterval的作用只是把你要执行的代码在你设定的一个时间点插入js引擎维护的一个代码队列中, 插入代码队列并不意味着你的代码就会立马执行的,理解这一点很重要. 而且setTimeout和setInterval还有点不...

    setTimeout和setInterval的浏览器兼容性分析

    ### setTimeout和setInterval的浏览器兼容性分析 #### 一、概述 `setTimeout` 和 `setInterval` 是JavaScript中用于处理延时与周期性任务的重要函数。它们被广泛应用于各种前端开发场景,例如页面动画效果、轮询...

    VUE中setTimeout和setInterval自动销毁案例

    在Vue.js应用中,我们经常会遇到使用`setTimeout`和`setInterval`来实现某些延时或周期性操作。然而,如果不正确地管理这些定时器,它们可能会在组件被销毁后仍然继续运行,导致不必要的资源消耗和潜在的问题。本文...

    setTimeout和setInterval的深入理解

    大概半年前发表过一篇关于setTimeout和setInterval的文章,但是现在回去仔细一看发现其实存在很多不足以及错误。事实上,setTimeout和setInterval并没有我们字面上理解的那么简单。要真正掌握并理解这两个方法,还得...

    JavaScript定时器:`setTimeout`和`setInterval`的深入指南

    setTimeout和setInterval是JavaScript中两个基本的定时器函数,它们在前端开发中有着广泛的应用。本文将详细介绍这两个函数的使用方法、差异、以及如何在实际项目中有效利用它们。 setTimeout和setInterval是...

    vue 解决setTimeOut和setInterval函数无效报错的问题

    在Vue.js开发过程中,有时会遇到`setTimeout`和`setInterval`函数失效并抛出错误的问题。本文将详细解析这个问题的原因及解决方案。 首先,`setTimeout`和`setInterval`是JavaScript中的两个常用定时器函数。`...

    06_再看setTimeout与setInterval.html

    06_再看setTimeout与setInterval.html

    JavaScript setTimeout和setInterval的使用方法 说明

    在JavaScript编程中,setTimeout和setInterval是用于控制代码在一定时间后执行或定期重复执行的两个非常有用的函数。这两个函数都是JavaScript的全局函数,可以在浏览器环境中直接使用,也可以在Node.js中使用。 ##...

Global site tag (gtag.js) - Google Analytics