`
dreamoftch
  • 浏览: 496859 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript setInterval setTimeout

阅读更多
定时

JavaScript提供了几个函数来让你控制和设置某些行为的执行时间,这类函数中最常见的是:

1. setInterval

2. clearInterval

3. setTimeout

4. clearTimeout

setInterval函数

在某些情况下,JavaScript代码需要反复执行但又无需任何的用户交互,setInterval函数可以让你很容易就做到这一点。setInterval有两个必需的和一个可选的参数,第一个必需的参数是你想要重复执行的代码(code),第二个参数是毫秒(milliseconds),其定义了JavaScript代码每次执行的间隔时长。第三个可选参数是一个可传递给函数调用的实际参数,这一函数调用是通过code参数来指定的。一开始你可能会觉得所设置的间隔时长有些奇怪,因为它被定义成毫秒。因此,如果你希望每间隔一秒钟运行一次的话,就是要1000毫秒,两秒就是2000毫秒,如此类推。表2列出了每个参数及其在setInterval函数中的作用。

表2. setInterval函数的可用参数

参数必需的还是可选的 描述

code必需的 setInterval函数要执行的JavaScript代码;

这一代码可以是定制的或是一个函数调用。

milliseconds 必需的 每两次代码执行之间的间隔时长,以毫秒为单位。

argument  可选的 是一个很有用的参数,当函数被用作code参数时,

可用来把实际参数传递给该函数。

下面的代码提供了这样的一个例子,即如何使用setInterval函数来每隔10秒钟就执行一次另一个函数,并把一个参数传递给该函数。这样argument的值就可以在执行函数的内部被访问,该参数可以是一个变量、对象,或是一个简单的文本串,如该例子中展示的那样:

    setInterval(myFunction, 10000, 'sample');  
    function myFunction(myArg)  
    {  
    alert('myFunction argument value: '+ myArg);  
    } 

如果你想要终止这样的一种间隔执行的话,语言也为此提供了一个函数。

clearInterval函数

终止间隔行为需要用到clearInterval函数,不过在最初创建间隔行为时必须要包含一个变量,这样之后的clearInterval才能引用它。下面的代码提供了一个例子,说明clearInterval函数如何引用之前为最初的setInterval设定的变量:

    var myInterval = setInterval(myFunction, 10000, 'sample');  
    function myFunction(myArg)  
    {  
    alert('myFunction argument value: '+ myArg);  
    clearInterval(myInterval);  
    } 

正如你所见到的那样,最初的setInterval函数被指派了一个变量名,其名称为myInterval。在这以后你就可以使用myInterval来引用setInterval,并可改变这一变量,或是使用clearInterval函数来停止最初的间隔执行函数。在这一例子中,这一函数只被调用了一次,因为clearInterval函数在该函数第一次调用时就执行了。

setTimeout函数

在可以基于某个时间约束来执行代码方面,setTimeout函数类似于setInterval函数,甚至其参数也是和setInterval的一样的(参见表2)。不过,最大的不同则是setTimeout函数只执行代码一次而不是重复执行。这里的例子说明了如何使用setTimeout函数来在10秒钟之后执行一个函数。

    setTimeout(myFunction, 10000, 'sample');  
    function myFunction(myArg)  
    {  
    alert('myFunction argument value: '+ myArg);  
    } 

在你希望执行某些代码,但又不想立刻执行的时候,setTimeout很有用,其实质上就是一种延迟代码执行的方式。

clearTimeout函数

如果出于某些原因,你改变了主意,需要取消setTimeout设置的延迟行为的话,则clearInterval函数可用来处理这一工作。与clearInterval函数一样,要为setTimeout函数指派一个变量名称,这样过后clearTimeout就可以引用它并停止它所设定的行为。下面的代码提供的例子说明了如何使用clearTimeout来停止setTimeout设定的调用:

    var myTimeout = setTimeout(myFunction, 10000, 'sample');  
    function myFunction(myArg)  
    {  
    alert('myFunction argument value: '+ myArg);  
    clearTimeout(myTimeout);  
    } 

在这一例子中,你给最初的setTimeout函数指派了一个变量名称,其被命名为myTimeout。接着你就可以使用myTimeout来引用setTimeout函数并使用clearInterval函数来停止它。


例子:实现页面跳转的时候,显示还剩 N 秒
通过setTimeout()方法:
<script type="text/javascript">
var lefttime=5;
function timeout(){
if(lefttime<0){
window.location.href="http://www.baidu.com";
return;
}
document.getElementsByTagName("div")[0].innerHTML="还剩"+lefttime+"  s";
lefttime--;
setTimeout(timeout,1000);
}
</script>
<div>This is my JSP page. </div><br>
    <input type="button" onclick="beginTimeout()">
上面要调用timeout();即可。

或者使用setInterval()方法:
<script type="text/javascript">
var lefttime=5;
var interval;
function timeout(){
if(lefttime<0){
clearInterval(interval);
window.location.href="http://www.baidu.com";
return;
}
document.getElementsByTagName("div")[0].innerHTML="还剩"+lefttime+"  s";
lefttime--; 
}
function beginTimeout(){
interval = setInterval(timeout,1000);
}
</script>
<div>This is my JSP page. </div><br>
    <input type="button" onclick="beginTimeout()">
通过调用beginTimeout()方法即可。
 

 

分享到:
评论

相关推荐

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

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

    javascript之setTimeOut和setInterval的用法

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

    Javascript中setTimeOut和setInterval的定时器用法

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

    JavaScript中SetInterval与setTimeout的用法详解

    必需,要调用的函数后要执行的 JavaScript 代码串。 millisec 必需,在执行代码前需等待的毫秒数。 setTimeinterval setInterval(code,millisec[,”lang”]) 参数 描述 code 必需,要调用的函数或要...

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

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

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

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

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

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

    JavaScript SetInterval与setTimeout使用方法详解

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

    JavaScript中停止执行setInterval和setTimeout事件的方法

    js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作。 (1)setInterval 方法可按照指定的周期(以...

    浅谈JavaScript中setInterval和setTimeout的使用问题

    标题中提到的JavaScript中的setInterval和setTimeout是JavaScript语言中实现定时执行任务的两个非常重要的函数,它们允许开发者安排在特定时间后执行代码块。 描述部分强调了在处理任务量较大时,避免使用...

    javascript setTimeout和setInterval计时的区别详解

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

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

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

    js中SetInterval与setTimeout用法

    在 JavaScript 中,SetInterval 和 setTimeout 是两种常用的定时器函数,用于实现延迟执行或重复执行某些操作。下面我们将详细讲解这两种函数的区别和用法。 SetTimeout 函数 SetTimeout 函数用于延迟执行某个函数...

    JavaScript setTimeout和setInterval的使用方法 说明

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

    js中SetInterval与setTimeout用法.pdf

    JavaScript 中的 SetInterval 与 setTimeout 用法 在 JavaScript 中,SetInterval 和 setTimeout 是两种常用的定时器函数,用于实现延迟执行或重复执行某些操作。本文将详细介绍这两种函数的用法和区别。 ...

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

    javascript 中的 setInterval 和 setTimeout 使用实例 在 javascript 中,有两个重要的定时执行函数,即 setInterval 和 setTimeout。这两个函数都可以用来执行某个函数或表达式,但它们之间有一些关键的区别。 ...

    javascript setTimeout和setInterval 的区别

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

    理解javascript定时器中的setTimeout与setInterval

    本文将深入讲解JavaScript中的两个重要定时器函数:`setTimeout`和`setInterval`。 首先,`setTimeout`函数用于在指定延迟时间后执行一次函数或代码片段。其基本语法如下: ```javascript var timeoutID = window....

Global site tag (gtag.js) - Google Analytics