js settimeout方法（JavaScript如何使用setTimeout（）设置定时器）

本文目录

• JavaScript如何使用setTimeout（）设置定时器
• 如何用javascript设置延时执行
• javascript中的setTimeout怎么用 我想定时刷新页面！！！
• js计时器中setTimeout和setInterval的区别和使用
• js 里的 settimeout函数
• 怎么js中settimeout
• JavaScript中的setTimeout如何使用

JavaScript如何使用setTimeout（）设置定时器

在JavaScript中，通过给setTimeout()方法设置需要调用的函数或要执行的代码串参数，和延迟的时间参数；在调用setTimeout()方法就可以设置一个简单的定时器。
在JS中，提供了一些原生方法来实现在设定的时间间隔之后去执行某一段代码；setTimeout()方法设置的是一次性定时器，是仅在指定的延迟时间之后触发一次。下面我们就来看看setTimeout()方法如何设置定时器。
setTimeout()方法
setTimeout()：设置一次性定时器，在指定的毫秒数后调用函数或计算表达式；会在载入时延迟指定时间后,去执行一次表达式，仅执行一次。【相关视频教程推荐：JavaScript教程】
语法：
setInterval(code,millisec,lang);参数说明：
code：必需的参数，表示需要调用的函数或要执行的代码串。
millisec：必须的参数，表示周期性执行或调用 “code参数”前的时间间隔，以毫秒为单位计时（1s=1000ms)。
lang 可选的参数。
setTimeout()方法的示例：
html代码：
《p》点击按钮，在等待 3 秒后弹出 "Hello"。《/p》
《button onclick="myFunction()"》点我《/button》js代码：
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}效果图：
setTimeout()设置无限循环的定时器
使用setTimeout()方法也可以实现无限循环的定时器，我们需要编写一个函数来调用其自身。此时setTimeout()方法会无限循环，如果想要停止定时器，就需要使用clearTimeout()方法。
clearTimeout()方法
clearTimeout()：用来取消setTimeout()设置的定时器，在设置setTimeout()进行无限循环时使用。
语法：
clearTimeout(id_of_setTimeout);参数说明：
id_of_setTimeout：表示由 setTimeout() 返回的 ID 值。
注：该值标识要取消的延迟调用的函数或延迟执行的代码串；
setTimeout()方法和clearTimeout()方法的联合示例
《!DOCTYPE HTML》
《html》
《head》
《script type="text/javascript"》
var num=0,i;
function timedCount(){
document.getElementById(’txt’).value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
《/script》
《/head》
《body》
《form》
《input type="text" id="txt"》
《input type="button" value="Stop" onClick="stopCount()"》
《/form》
《/body》
《/html》效果图：
可以看出，一开始setTimeout()设置的定时器在无限循环，使得input框中的数字在不断的增大，当按下Stop按钮后，就会调用clearTimeout()方法，停止setTimeout()定时器，数字就停止增加，保持为数字11。
总结：

如何用javascript设置延时执行

二、JavaScript 的计时事件的函数
setTimeout() - 在指定时间后执行代码
clearTimeout() - 取消 setTimeout()注意:setTimeout() 和 clearTimeout() 都是HTML DOM 的 Window 对象的函数。
三、setTimeout详解
var t=setTimeout("javascript 语句",时间参数)
注：时间参数单位为毫秒
示例：var t=setTimeout("alert(’3 seconds!’)",3000)
如果js语句带变量，则必须用+号将变量连接起来，如：
var t=setTimeout（"document.getElementById("+menuid+").style.display=’none’",3000)
四、clearTimeout详解
语法：clearTimeout(setTimeout的变量名)
示例：clearTimeout(t) //其中t为前面设置的setTimeout的变量
使用clearTimeout可以随时停止计时。
五、应用技巧
建议将setTimeout单独设置为一个函数。如：
function delayRun(code,time) {
var t=setTimeout(code,time);}这样，在需要让某段代码延时执行的时候，只需在这段代码前加入这个函数就可以了。如：
onmouseover=delayRun("setTab(0,0)",500)
其中setTab是一个自定义的函数。如果以后不想让setTab延时执行，则去掉语句中的delayRun相关的代码即可，改为：onmouseover=setTab(0,0) 就可以了。
这种写法避免每一个需要延时的地方都写一段setTimeout的代码，只需要直接调用就可以了，很方便。也节省了代码的量。

javascript中的setTimeout怎么用 我想定时刷新页面！！！

一般用到的计时器有两个,一个是setTimeout(多少毫秒后执行一次) 一个是 setInterval(每隔多少毫秒执行一次),

setTimeout(),里面要传入2个参数,第一个是要执行的函数,第二个是延时的毫秒数,setInterval 也是一样的;

写个例子: 10秒后刷新当前页

setTimeout(function(){
location.reload();
},10000);

js计时器中setTimeout和setInterval的区别和使用

JavaScript 计时器

计时器类型：
一次性计时器(setTimeout)：仅在指定的延迟时间之后触发一次。
间隔性触发计时器(setInterval)：每隔一定的时间间隔就触发一次。
计时器方法：

一.计时器setInterval()       
                   

在执行时,从载入页面后每隔指定的时间执行代码。

语法:

setInterval(代码,交互时间);

参数说明：

1. 代码：要调用的函数或要执行的代码串。

2. 交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）。

返回值:

一个可以传递给 clearInterval() 从而取消对"代码"的周期性执行的值。

调用函数格式(假设有一个clock()函数):

setInterval("clock()",1000)
或
setInterval(clock,1000)

我们设置一个计时器，每隔100毫秒调用clock()函数，并将时间显示出来，代码如下:

《!DOCTYPE HTML》
《html》
《head》
***隐藏网址***
《title》计时器《/title》
《script type="text/javascript"》
  var int=setInterval(clock, 100)
  function clock(){
    var time=new Date();
    document.getElementById("clock").value = time;
  }
《/script》
《/head》
《body》
  《form》
    《input type="text" id="clock" size="50"  /》
  《/form》
《/body》
《/html》

二.计时器setTimeout()       
                 

setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。

语法:

setTimeout(代码,延迟时间);

参数说明：

1. 要调用的函数或要执行的代码串。
2. 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。

当我们打开网页3秒后，在弹出一个提示框，代码如下:

《!DOCTYPE HTML》
《html》
《head》
《script type="text/javascript"》
  setTimeout("alert(’Hello!’)", 3000 );
《/script》
《/head》
《body》
《/body》
《/html》

当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。

《!DOCTYPE HTML》
《html》
《head》
《script type="text/javascript"》
function tinfo(){
  var t=setTimeout("alert(’Hello!’)",5000);
 }
《/script》
《/head》
《body》
《form》
  《input type="button" value="start" onClick="tinfo()"》
《/form》
《/body》
《/html》

要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。

《!DOCTYPE HTML》
《html》
《head》
《script type="text/javascript"》
var num=0;
function numCount(){
 document.getElementById(’txt’).value=num;
 num=num+1;
 setTimeout("numCount()",1000);
 }
《/script》
《/head》
《body》
《form》
《input type="text" id="txt" /》
《input type="button" value="Start" onClick="numCount()" /》
《/form》
《/body》
《/html》

js 里的 settimeout函数

首先，基本概念：
调用函数不占内存，一个函数只在内存中出现一次。函数里面用到的变量是占用内存的。
函数调用结束后内部变量全部会被释放，在内存中保存的有全局变量和函数返回值。
所以，针对你这个问题，内存够不够用，就看你这个定时settimeout函数执行的代码段是怎么修改全局变量和自身返回值的，如果一直是累加，早晚内存是不够用的。
对了，js还有一个主动回收内存的函数CollectGarbage()，提供在函数执行内部进行临时主动内存清理的功能。

怎么js中settimeout

1. SetTimeOut()
1.1 SetTimeOut()语法例子
1.2 用SetTimeOut()执行Functio
1.3 SetTimeOut()语法例子
1.4 设定条件使SetTimeOut()停止
1.5 计分及秒的counter
2. ClearTimeout()
3. Set Flag
etTimeout( ) 是属於 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。
练习-69　等候三秒才执行的 alert( )
在 第 3 章 说到 alert 对话盒, 一般是用按钮叫出来, 在这练习, 你会看到网页开启後 3 秒, 就会自动出现一个 alert 对话盒。
1.　请用浏览器开启示范磁碟中的 timeout1.htm, 这档案有以下内容:
《html》 《body bgcolor=lightcyan text=red》 《h1》 《font color=blue》 示范网页 《/font》 《/h1》 《p》 《/br》 《p》 请等三秒! 《script》 setTimeout("alert(’对不起, 要你久候’)", 3000 ) 《/script》 《/body》 《/html》
2.　留意网页开启後三秒, 就会出现一个 alert 对话盒。
etTimeout( ) 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:
今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method。
etTimeout( ) 通常是与 function 一起使用, 以下是一个较上个练习复杂的例子。
练习-70　状态列中自动消失的文字
在练习-20, 你看过如何用按钮在状态列显示文字, 然後再用按钮消除文字, 在这练习, 你看到如何用按钮在状态列显示文字, 而这文字会在三秒後自动消失。
1.　请用浏览器开启示范磁碟中的 timeout2.htm, 这档案有以下内容:
《html》 《body bgcolor=lightcyan text=red》 《h1》 《font color=blue》 示范网页 《/font》 《/h1》 《p》 《/br》
《script》 function clearWord( ) {　window.status=""　} 《/script》 《form》 《input type="button" value="在状态列显示文字" 　　onClick="window.status=’Hello’ , setTimeout(’clearWord( )’, 3000) "》 《/form》 《/body》 《/html》
2.　请在按钮上按一下, 你应见到状态列出现 Hello 这字, 留意过了三秒, 这字就会消失。
1.　这处先设定一个名为 clearWord( ) 的 function, 作以下定义:
window.status=""
这是用来消除状态列的文字 (请看练习-20 的说明), 浏览器执行 clearWord( ) , 就会消除状态列的文字。
2.　今次按钮设定了启动以下两项工作, 用 ， 分隔, 浏览器会顺序执行这两项工作:
onClick="window.status=’Hello’ , setTimeout(’clearWord( )’, 3000) "
3.　今次的 setTimeout( ) 有以下设定:
这是设定等 3 秒 (3000 milliseconds) 浏览器就会执行 clearWord( ) 这一个function。
在第 2 章, 你看过如何使到父视窗开启时自动开启一个子视窗, 若观看者不关闭这子视窗, 这子视窗就会一路开启。看过以上的练习, 请你设计一个会开启子视窗的网页, 而这子视窗在开启後两秒, 就会自动关闭。
etTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( ) 再启动自己一次, 就会使到第二个 setTimeout( ) 执行, 第二个又启动第三个, 这样循环下去, 这 setTimeout( ) 就会不断执行。
练习-71　自动每秒加 1 的 functio
在这练习, 你看到如何使用 setTimeout( ) 令文字框的数值每秒就加 1, 当然你也可以设定其他递增的速度, 例如每五秒就加 5, 或每五秒就加 1。
1.　请用浏览器开启示范磁碟中的 timeout3.htm, 这档案有以下内容:
2.　网页开启後, 请你留意文字框中的数值转变。
3.　请你将这档案复制去硬碟, 更改一些设定, 例如 x = x+5, 或将等候时间改为5000, 看有什麼反应。
1.　这网页有两个 script, 第一个是设定 countSecond( ) 这个 function, 第二个在後的是在网页完全载入後, 就启动这 function。
2.　留意今次以下的设定:
当 countSecond( ) 启动後, 就会启动 setTimeout( ), 这个 method 在一秒後又启动 countSecond( ), countSecond( ) 启动後又启动 setTimeout( ) , 所以得出的结果是 countSecond( ) 每秒执行一次。
3.　在 JavaScript, 我们是使用这处说的方法使到一些事项不断执行, 其中一个用途是显示转动时间, 另一个用途是设定跑动文字, 随後的章节会有例子。
用上述的方法设定时间, setTimeout( ) 虽然设定了是一秒, 但浏览器还有另外两项功能要执行, 所以一个循环的时间是稍多於一秒, 例如一分钟可能只有58 个循环。
etTimeout( ) 的回圈开始後, 就会不断重复, 在上个练习, 你看到文字框的数字不断跳动, 但我们是有方法使到数字跳到某一个数值就停下来, 其中一个方法是用 if...else 设定一个条件, 若是 TRUE 就继续执行 setTimeout( ) , 若是 FALSE 就停止。
例如要使到上个练习的 counter 跳到 20 就停下, 可将有关的 function 作以下的更改。
在前面的练习, 相信你已学识如何使用 setTimeout( ), 现在请你看一个较复习的例子。
练习-72　计时的 counter
在这练习, 你要设定两个文字框, 一个显示分钟, 另一个显示秒, 网页开启後, 就会在这两个文字框中自动计时。
1.　请用浏览器开启示范磁碟中的 timeout4.htm, 这档案有以下内容:
《html》 《head》 《script》 x=0 y=-1 function countMin( ) {　y=y+1 　 document.displayMin.displayBox.value=y 　 setTimeout("countMin( )",60000) }
2.　请你留意两个文字框中的数字转变。
1.　这网页有两个 function, 一个用来计分钟, 一个用来计秒。在这处, 笔者只是示范setTimeout( ) 的操作, 因为计时器有其他更精简的写法。(留意: 这方式的计时并不准确。)
2.　留意计秒的 function:
这处的 % 符号是 modulus (馀数), 例如 z = x % 60 表示先进行 x / 60, 得出的馀数作为 z 这变数, 例如 82 秒, modulus 就是 22, 所以文字框会显示 22 而不是 82。
3.　若你要将单位数字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:
在前一节, 你看过如何使用 setTimeout( ) 来使到浏览器不断执行一个 function, 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这 method。
clearTimout( ) 有以下语法:　clearTimeout(timeoutID)
要使用 clearTimeout( ), 我们设定 setTimeout( ) 时, 要给予这 setTimout( ) 一个名称, 这名称就是 timeoutID , 我们叫停时, 就是用这 timeoutID来叫停, 这是一个自订名称, 但很多程式员就以 timeoutID 为名。
在下面的例子, 笔者设定两个 timeoutID, 分别命名为 meter1 及 meter2, 如下:
timeoutID 　↓ meter1 = setTimeout("count1( )", 1000) meter2 = setTimeout("count2( )", 1000)
使用这 meter1 及 meter2 这些 timeoutID 名称, 在设定 clearTimeout( ) 时, 就可指定对哪一个 setTimeout( ) 有效, 不会扰及另一个 setTimeout( ) 的操作。
练习-73　可停止的 setTimeout( )
这练习以练习-71 为蓝本, 但作了两个改变: (1) 有两个 setTimeout( ), (2) 有两个按钮, 分别可停止这两个 setTimout( )。
1.　请用浏览器开启示范磁碟中的 clear.htm, 这档案有以下内容:
《html》 《head》 《script》 x = 0 y = 0
2.　留意网页中的两个文字框及内里变动的数字, 每个文字框旁有两个按钮, 请你试试两个按钮的反应。
3.　请你连续按多次 的按钮, 留意数值的跳动加快了, 原因是每按一次就启动 function 一次, 每个 function 都令数值跳动, 例如启动同一的 function 四次, 就会一秒跳四次。(请看下一节)
前个练习说到我们用一个按钮来启动一个 function, 每按一下就会启动这 function 一次, 请看以下例子。
练习-74　效果重复的 setTimeout( )
这练习实际是将 练习-73 简化, 只有一个计时器, 笔者想示范的是每按 一次, 就会启动 count( ) 这 function 一次。
1.　请用浏览器开启示范磁碟中的 flag1.htm, 这档案有以下内容:
《script》 count( ) 《/script》 《/body》 《/html》
2.　网页开启後, 你应见到文字框中的数字跳动, 请你按四次 , 留意这会加快数字跳动, 原因是有关的 function 被开启了多个, 每个都会使数字转变。
3.　按了四次 的按钮, 你会发现要按五次才能停止数字跳动。
在编写程式时, 我们常要提防使用者作出一些特别动作, 例如使用者按两次 按钮, 这计时器就失准了。我们是否有办法使到一个按钮被按一次就失效呢? 这就不会产生重复效果。
笔者藉这处的例子 (随後还有多个例子), 解说程式中一个 set flag (设定旗标) 的概念, flag 是一个记认, 一般来说, 这可以是 0 或是 1 (也可用 on 或 off, 或任何两个自选的名称或数字), 但也可以是 2、3、4 或更大的数字, 在这例子有以下设定:
1.　程式开启时 flag=0。
2.　当 counter( ) 执行时会顺便将 flag 变为 1。
3.　在 这按钮的反应中, 会先检查 flag 是 0 或是 1, 若是 0 就会产生作用, 若是 1 就没有反应。
4.　使用这 flag 的方式, count( ) 这 function 开启後, 这按钮就没有作用。
这处的 flag 是一个变数, 可任意取名, 我们用 flag来称呼这变数的原因, 是因为这变数好处一支旗, 将旗竖起 (flag is on), 就会产生一个作用, 将旗放下 (flag is off), 就产生另一个作用。
练习-75　只可开启一次的 functio
这练习是将上个练习加多一个 flag, 使到每次只能有一个 count( ) 这 function 在进行。
1.　请用浏览器开启示范磁碟中的 flag2.htm, 这档案有以下内容:
function restart( ) {　if (flag==0) 　　　{　count( )　} } 《/script》 《/head》
《script》 count( ) 《/script》
《form》 《input type=button value="Show flag" onClick="alert(’The flag now is ’+ flag) " 》 《/form》 《/body》 《/html》
2.　在网页中, 你应见到三个按钮及文字框中的数字跳动。
3.　请你按 这按钮, 应见到一个话对盒显示 flag 是 1。
4.　请你按 这按钮, 应见到话对盒显示 flag 是 0。
5.　请你按多次 这按钮, 应见到话对盒显示 flag 变回 1。
1.　这网页第 4 行有这一句: flag=0 , 这是设定 flag 这变数及将初始值定为 0, 你也可将初始值定为 1, 随後有关的 0 和 1 对调。
2.　count( ) 这 function 最後一句是 flag=1 , 所以启动 count( ) 後, flag 就会变为 1。
3.　 的按钮是用来启动 restart( ), 这 function 有以下设定:
function restart( ) {　if (flag==0) 　　　{　count( )　} }
这处的 if statement 检查 flag 是否等於 0, 若是 0 就启动 count( ), 若是 1 (即不是 0) 就没有反应, 使用这方法, 若 count( ) 已在执行中, 这按钮不会有作用。
这处的 flag=1 设定, 实际设为 1 或 2 或 3 等数值都是一样的, 只要不是 0 就可以了, 所以这两个相对的旗标, 看似是 "0" 和 "1", 实际是 "0" 和 "non-zero" (非-0)。
4.　 的按钮有以下设定:
onClick="clearTimeout(timeoutID); flag=0 "
这是停止 setTimeout( ) 的操作时, 同时将 flag 转回 0, 这使到 restart( ) 这 function 可以重新启动 count( )。

JavaScript中的setTimeout如何使用

setTimeout可以在一定时间后进行一次特定处理，无需重复，本篇文章我们就来看看setTimeout定时器的使用方法。
我们知道在JavaScript中有两种类型的计时处理器：setInterval和setTimeout，在上一篇文章中我们已经介绍了setInterval定时器，下面的这篇文章我们就来看看JavaScript中的setTimeout定时器的使用方法。
setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。
基本语法如下
setTimeout（function函数,固定的时间）下面我们就来具体看看setTimeout的用法
我们先来看一段简单的代码
《!DOCTYPE html》
《html lang = "ja"》
《head》
《meta charset = "utf-8"》
《title》JavaScript《/title》
《/head》
《body》
《script》
var count = 0;
var countup = function(){
console.log(count++);
}
《/script》
《/body》
《/html》准备count的变量，以0为基准，一个一个地计数相加（count ++），然后用console.log输出。并且将这一系列的处理放入countupp的变量中。
假设你想在1000毫秒后调用这个变量countup计数，需要添加setTimeout()
代码如下
《script》
var count = 0;
var countup = function(){
console.log(count++);
}
setTimeout(countup, 1000);
《/script》由于setTimeout只调用一次，因此输出0并在1000毫秒后完成。
如何使用setTimeout()像setInterval()一样迭代计数呢？
我们可以在迭代函数中写入setTimeout，即{}，用countup（）调用它 ;
代码如下
《script》
var count = 0;
var countup = function(){
console.log(count++);
setTimeout(countup, 1000);
}
countup();《/script》通过这样做，它从一旦完成处理的点开始再次重复相同的过程1000毫秒。
运行效果如下：处理类似于setInterval的行为。
如果想要停止计数，我们需要使用clearTimeout。
代码如下
var id = setTimeoutl（countup，1000）;通过使用clearTimeout指定此id ，您可以随时停止setTimeout处理（很明显，停止处理了）
《script》
var count = 0;
var countup = function(){
console.log(count++);
var id = setTimeout(countup, 1000);
if(count 》 5){
clearTimeout(id);
}
}
countup();
《/script》在上面的程序中，当执行setTimeout的计数并且countup变为大于5（if（count》 5））时，执行clearTimeout。
因此，它最多可以计数到5。
最后，我们来简单看一下setInterval计数和使用setTimeout计数之间的区别
在使用setInterval进行迭代处理的情况下：在从处理起始点开始的一定时间后重复相同的处理
迭代setTimeout时：从处理结束点开始经过一段时间后重复相同的处理
因此，即使你在相同的1000毫秒之后指定时间，开始下一个过程所需的时间也会发生变化。
此外，如果一个进程所需的时间超过间隔时间，则行为将是有缺陷的。如果你想确保处理和处理之间有一定的余量，我们可以使用setTimeout。