`
jsczxy2
  • 浏览: 1273713 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

setTimeout和setInterval的使用[转]

阅读更多

 

这两个方法都可以用来实现在一个固定时间段之后去执行JavaScript。不过两者各有各的应用场景。

 方 法

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

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

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

File: settimeout_setinterval.js


showTime();

function showTime()

{

    
var today = new Date();

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

    setTimeout(
"showTime()"5000);

}

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

File: settimeout_setinterval2.js

 

 

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,便可以终止那段被调用的过程代码的执行了,具体实现如下:

File: settimeout_setinterval3.js (excerpt)

 

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身上实现,具体实现如下:

File: settimeout_setinterval4.js (excerpt)

 

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

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

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

function stopGoal()
{
   clearTimeout(timeoutProcess);
}

 

分享到:
评论

相关推荐

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

    总之,`setTimeout()`和`setInterval()`是JavaScript中用于处理时间调度的核心工具,它们的正确使用对于编写健壮的前端应用至关重要。理解它们的工作机制,并根据需求选择合适的函数,能够帮助开发者更好地控制代码...

    javascript之setTimeOut和setInterval的用法

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

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

    JavaScript定时器是编程中不...总之,理解并正确使用`setTimeout`和`setInterval`是JavaScript开发中的基础技能。它们可以帮助我们实现延迟执行、定时执行和周期性执行等功能,但同时也需要谨慎处理以防止潜在的问题。

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

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

    setTimeout和setInterval的区别

    在JavaScript中,定时执行任务是通过`setTimeout`和`setInterval`这两个函数来实现的。它们都是用于在指定延迟后执行代码,但它们之间存在显著的区别。 `setTimeout`函数用于在给定的`DelayTime`(延迟时间)过后...

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

    通过以上的分析可以看出,尽管`setTimeout`与`setInterval`都可以用来控制代码的执行时间,但它们的应用场景和执行方式存在本质的区别。正确理解和运用这两个函数对于提高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函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请求获取最新数据等等。但它们的应用是有区别的。 ...

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

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

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

    在使用 setTimeout 和 setInterval 函数时,需要注意参数的传递方式和调用方式。使用闭包可以正确地传递参数,避免出现意外的结果。同时,需要注意函数的调用方式,例如 `setTimeout(auto, 4000)` 和 `setInterval...

    javascript setTimeout和setInterval计时的区别详解

    通过这些知识点,可以看出setTimeout和setInterval在功能上非常相似,但各自的特点决定了它们在不同的场景下使用。例如,如果只需要延迟执行一次操作,推荐使用setTimeout;如果需要周期性执行操作,可以使用...

    JavaScript setTimeout和setInterval的使用方法 说明

    在使用setTimeout和setInterval时,你可以通过返回值(一个定时器ID)来控制它们。这个ID可以用于后续的clearTimeout和clearInterval函数来取消定时器。 #### 删除setTimeout 当你想取消由setTimeout设置的定时器时...

    VUE中setTimeout和setInterval自动销毁案例

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

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

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

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

    在JavaScript编程中,定时器是控制...通过本文的介绍,你应该对setTimeout和setInterval有了更深入的理解,以及如何在实际项目中有效地使用它们。记住,掌握这些基础知识是成为一名优秀的JavaScript开发者的重要一步。

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

    总之,理解JavaScript的`this`指向以及Vue中`setTimeout`和`setInterval`的正确使用方式,以及熟悉Element UI等UI库的API规范,是避免这类问题的关键。通过使用箭头函数来保持`this`的正确指向,以及按照UI库的推荐...

    javascript setTimeout和setInterval 的区别

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

    setTimeout和setInterval的深入理解

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

    JS中SetTimeout和SetInterval使用初探

    在JavaScript中,`setTimeout` 和 `setInterval` 是两种非常重要的定时器函数,它们用于在指定的时间后执行特定的函数或代码块。这篇文章将深入探讨这两个函数的使用方法、相同之处以及它们之间的区别。 首先,`...

    06_再看setTimeout与setInterval.html

    06_再看setTimeout与setInterval.html

Global site tag (gtag.js) - Google Analytics