`
zsw_sh
  • 浏览: 13171 次
文章分类
社区版块
存档分类
最新评论

setTimeout与setTimeinterval的使用

 
阅读更多

 这两个方法都可以用来在固定的时间段后去执行一段javascirpt代码,不过两者各有各的应用场景。

  实际上,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);
}
复制代码

转自:http://www.cnblogs.com/qiantuwuliang/archive/2009/06/20/1507304.html

分享到:
评论

相关推荐

    JavaScript中SetInterval与setTimeout的用法详解

    注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止 参数 描述 code 必需,要调用的函数后要执行的 JavaScript 代码串。 millisec 必需,在执行代码前需等待的毫秒数。 setTimeinterval ...

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

    这与 JavaScript 中的 `setTimeout` 类似。下面给出具体的实现代码: ```csharp using System; using System.Timers; public static class TimerHelper { /// /// 在指定时间过后执行指定的表达式。 /// ///...

    解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题

    箭头函数不会创建自己的this上下文,所以箭头函数中的this保持与定义时所在的上下文相同。这就意味着在Vue中,箭头函数内部的this会正确指向Vue实例,而不是全局对象。因此,使用箭头函数可以解决this上下文的问题,...

    jQuery setTimeout()函数使用方法

    setTimeout()从载入后延迟指定的时间去执行一个表达式或者是函数;仅执行一次 ;和window.clearTimeout一起使用.我在 代码如下:$(document).ready(function(){setTimout(test(),200); function test() { alert(1&#...

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

    其语法与`setTimeout`相似: ```javascript setInterval(function, interval, param1, param2, ...); ``` 其中,`interval`是执行间隔的时间(以毫秒为单位)。下面是一个每秒更新计数器的例子: ```javascript ...

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

    与`setTimeout()`类似,`setInterval()`的第二个参数也是一个延迟时间,但区别在于它会每隔这个时间重复执行提供的函数。这也意味着,如果执行函数本身需要的时间超过设定的延迟,可能会出现函数调用的重叠。 考虑...

    setTimeout应用(模拟站长之家导航)

    3. **交互响应**:用户与导航栏交互时,例如鼠标悬停在某个链接上,可以使用`setTimeout`延迟显示下拉菜单,提升用户体验。 4. **加载提示**:如果导航栏包含异步加载的内容,`setTimeout`可以用来在加载开始后显示...

    利用setTimeout解决延时执行某操作

    setTimeout,javascript 延时执行函数,闭包处理 利用javascript闭包处理延时操作

    使用setTimeout()方法模拟进度条

    使用setTimeout()方法模拟进度条

    模态对话框导致setTimeout失效的解决方案(一)

    在IT行业中,我们经常遇到各种各样的问题,其中之一就是在使用模态对话框时,发现`setTimeout`函数似乎不再按照预期工作。这个问题主要出现在JavaScript编程环境中,尤其是在与UI交互时。模态对话框,如Bootstrap的...

    setTimeout使用注意事项1

    然而,有一些使用 `setTimeout` 的注意事项需要开发者了解,特别是在高性能和优化方面。以下是一些关键点: 1. **延迟队列与消息队列**: 当你使用 `setTimeout` 时,回调函数实际上被添加到一个延迟执行的任务...

    向setTimeout传递函数参数

    在实际开发中,`setTimeout`常与`clearTimeout`配合使用,以实现动态控制任务的执行。 此外,如果你需要在多个地方使用同一个函数并传递不同的参数,可以考虑使用函数工厂或柯里化(Currying)技术。函数工厂可以...

    javascript之setTimeOut和setInterval的用法

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

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

    setInterval函数的执行机制与setTimeout相似,都是将任务添加到队列中,但不断调用函数(每次都有延迟),直到它被取消。 原因分析 由于JavaScript是一种单线程语言,异步事件(比如鼠标点击和定时器)仅在线程...

    JavaScript中setTimeout的那些事儿

    二、setTimeout与JavaScript单线程模型 JavaScript一直以来被认为是单线程语言,这意味着在同一时间,只能有一个任务在执行。这看似与setTimeout提供的异步执行功能相矛盾。然而,实际上setTimeout并没有打破...

    模态对话框导致setTimeout无效的解决方案(二)

    1. 使用`setInterval`代替`setTimeout`: `setInterval`会定期检查条件,如果对话框仍然打开,它会不断重试。一旦对话框关闭,`setInterval`内的代码就会执行。但是,这种方法需要谨慎使用,因为它可能导致资源浪费,...

    js中的setInterval和setTimeout使用实例.docx

    setTimeout 函数用于在指定的毫秒数后调用函数或计算表达式,该方法与 setInterval() 方法不同的是该方法只执行一次。语法为 setTimeout(code,millisec),其中 code 必需,表示要调用的函数后要执行的 JavaScript ...

    JS中setTimeout()的用法详解

    ### JS中setTimeout()的用法详解 #### setTimeout()概述 `setTimeout()` 是JavaScript中用于设置一...理解和掌握`setTimeout()` 与`clearTimeout()` 的正确使用方法,对于开发中实现复杂逻辑和优化用户体验至关重要。

    js中settimeout方法加参数的使用实例.docx

    在这个修复后的版本中,我们使用了一个外部变量`replayi`来跟踪当前的索引,避免了在`setTimeout`内部直接使用`i`。这样,每个定时器都有自己的状态,可以正确地执行。 总结一下,`setTimeout`在JavaScript中用于...

    JavaScript_window.setTimeout()_的详细用法

    下面通过一个简单的例子来展示如何使用`setTimeout`: ```javascript window.setTimeout(function() { console.log('Hello, World!'); }, 3000); // 3秒后输出 "Hello, World!" ``` #### 三、`window.setTimeout()...

Global site tag (gtag.js) - Google Analytics