settimeout,settimeout属于web api吗

setTimeout的返回值

答案：

1. setTimeout 是有返回值的， 表示当前setTimeout在页面中的所有setTimeout中的序号。

2. 作用：当使用clearTimeout的时候，就可以直接传入序号，准确结束掉某个setTimeout

js settimeout干什么用

setTimeout设置定时器，实现异步执行代码

setTimeout的第一个参数是一个函数，即打算异步执行的函数

第二个参数为毫秒数，及需要执行的代码会在这个毫秒数之后执行

但并不保证一定会在达到设置的时间执行，它只是将代码放入待执行队列，尽量在设置时间后执行

怎么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.　请你按 [Show flag] 这按钮, 应见到一个话对盒显示 flag 是 1。

4.　请你按 [停止计时] 这按钮, 数字停止跳动, 请你按 [Show flag] 这按钮, 应见到话对盒显示 flag 是 0。

5.　请你按多次 [继续计时] 这按钮, 你应见到数字不会加快, 请你按 [Show flag] 这按钮, 应见到话对盒显示 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( )。

setTimeout函数问题

首先，setTimeout是可以取消的，可以不让其永远不终止，方法如下：

var?timer?=?null;

function?f(){

????alert("k");

????timer?=?setTimeout(f,1000);

}

//?在另外一个函数中，在某种条件下，取消之前的定时器

clearTimeout(timer);

这样，timer就不再执行了，也就不会再次调用函数f，生成新的定时器。

其次，关于内存，js类似于java有垃圾回收机制，一些不会再次用到的变量等，会被清理。只要是作用域不逃出函数f的，函数f执行完毕后，js总是有办法将其销毁，当然不一定百分百销毁。这样的话，内存怎么会越来越多呢？只有函数f在执行的时候会多一些，但随即又会被清理的。

最后，即便没有clearTimeout，在浏览器关闭的时候，一切都会消失的。

要提醒的是，如果函数f里在不停的创建对象，而且在函数f执行完毕后，这些对象又是被引用的，确实会有内存被越来越多的占用。

setTimeout的用法

setTimeout是javascript的内置函数，直接用就行。不用声明。input type=“text” 或者是别的，你都不是type，肯定不显示。html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title无标题文档/title

script language="javascript"

window.onload = function(){

setTimeout(function(){

var time = new Date();

var hour = time.getHours();

var minute = time.getMinutes();

var second = time.getSeconds();

document.getElementById("myclock").value = hour + ":" + minute + ":" + second + "";

}, 1000);

}

/script

/head

body

form name="myform"

td width="37%"

当前时间：input type="text" id="myclock" type="text" value="" size="10"

/td

/form

/body

/html

setTimeout 丢帧

setTimeout通过设置一个间隔时间来不断的改变图像的位置，从而达到动画效果。但利用seTimeout实现的动画在某些低端机上会出现 卡顿、抖动 的现象。?

这种现象的产生有两个原因：

setTimeout的执行时间并不是确定的 。setTimeout任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。

刷新频率受 屏幕分辨率 和 屏幕尺寸 的影响，不同设备的屏幕刷新频率可能会不同，而setTimeout只能 设置一个固定的时间间隔 ，这个时间不一定和屏幕的刷新时间相同。

以上两种情况都会导致setTimeout的执行步调和屏幕的刷新步调不一致，从而引起 丢帧 现象。?

为什么步调不一致就会引起丢帧呢？

setTimeout的执行只是在内存中对图像属性进行改变，这个变化必须要等到屏幕下次刷新时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px， 就会出现如下绘制过程：

第0ms:?屏幕未刷新，等待中，setTimeout也未执行，等待中；

第10ms:?屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；

第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了 1px ， setTimeout 未执行，继续等待中；

第20ms:?屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;

第30ms:?屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;

第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了 3px ， setTimeout未执行，继续等待中；

…

从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。