JS中setTimeout()的用法详解
作者：mdxy-dxy 发布时间：2023-06-26 20:55:17
setTimeout
setTimeout 语法例子
用 setTimeout 来执行 function
不断重复执行的 setTimeout
设定条件使 setTimeout 停止
计分及计秒的 counter
clearTimeout
Set flag
1. SetTimeOut()
1.1 SetTimeOut()语法例子
1.2 用SetTimeOut()执行Function
1.3 SetTimeOut()语法例子
1.4 设定条件使SetTimeOut()停止
1.5 计分及秒的counter
2. ClearTimeout()
3. Set Flag
10.1setTimeout( )
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。
1.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 对话盒。
setTimeout( )是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的 method 或 function, 有以下语法:
今次例子是设定等 3 秒 (3000 milliseconds), 浏览器就会执行 alert( ) 这一个method。
2.用 setTimeout( ) 来执行 function
setTimeout( ) 通常是与 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 章, 你看过如何使到父视窗开启时自动开启一个子视窗, 若观看者不关闭这子视窗, 这子视窗就会一路开启。看过以上的练习, 请你设计一个会开启子视窗的网页, 而这子视窗在开启后两秒, 就会自动关闭。
3.不断重複执行的 setTimeout( )
setTimeout( ) 预设只是执行一次, 但我们可以使用一个循环方式, 使到一个setTimeout( ) 再启动自己一次, 就会使到第二个 setTimeout( ) 执行, 第二个又启动第三个, 这样循环下去, 这 setTimeout( ) 就会不断执行。
练习-71自动每秒加 1 的 function
在这练习, 你看到如何使用 setTimeout( ) 令文字框的数值每秒就加 1, 当然你也可以设定其他递增的速度, 例如每五秒就加 5, 或每五秒就加 1。
1.请用浏览器开启示范磁碟中的 timeout3.htm, 这档桉有以下内容:
<html> <head>
<script>
x = 0
function countSecond( )
{x = x+1
document.fm.displayBox.value=x
setTimeout("countSecond()", 1000)
}
</script> </head>
<body bgcolor=lightcyan text=red> <p> </br>
<form name=fm>
<input type="text" name="displayBox"value="0" size=4 >
</form>
<script>
countSecond( )
</script>
</body> </html>
2.网页开启后, 请你留意文字框中的数值转变。
3.请你将这档桉複製去硬碟, 更改一些设定, 例如 x = x+5, 或将等候时间改为5000, 看有什麽反应。
1.这网页有两个 script, 第一个是设定 countSecond( ) 这个 function, 第二个在后的是在网页完全载入后, 就启动这 function。
2.留意今次以下的设定:
function countSecond( )
{x = x+1
document.fm.displayBox.value = x
setTimeout("countSecond()", 1000)
}
当 countSecond( ) 启动后, 就会启动 setTimeout( ), 这个 method 在一秒后又启动 countSecond( ), countSecond( ) 启动后又启动 setTimeout( ) , 所以得出的结果是 countSecond( ) 每秒执行一次。
3.在 JavaScript, 我们是使用这处说的方法使到一些事项不断执行, 其中一个用途是显示转动时间, 另一个用途是设定跑动文字, 随后的章节会有例子。
用上述的方法设定时间, setTimeout( ) 虽然设定了是一秒, 但浏览器还有另外两项功能要执行, 所以一个循环的时间是稍多于一秒, 例如一分钟可能只有58 个循环。
4.设定条件使 setTimeout( ) 停止
setTimeout( ) 的迴圈开始后, 就会不断重複, 在上个练习, 你看到文字框的数字不断跳动, 但我们是有方法使到数字跳到某一个数值就停下来, 其中一个方法是用 if...else 设定一个条件, 若是 TRUE 就继续执行 setTimeout( ) , 若是 FALSE 就停止。
例如要使到上个练习的 counter 跳到 20 就停下, 可将有关的 function 作以下的更改。
function countSecond( )
{if ( x < 20 )
{x = x + 1
document.displaySec.displayBox.value = x
setTimeout("countSecond( )", 1000)
}
}
5.计分及计秒的 counter
在前面的练习, 相信你已学识如何使用 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)
}
function countSec( )
{x = x + 1
z =x ％ 60
document.displaySec.displayBox.value=z
setTimeout("countSec()", 1000)
}
</script> </head>
<body bgcolor=lightcyantext=red> <p> </br>
<table> <tr valign=top> <td> 你在本网页的连线时间是:</td>
<td> <form name=displayMin>
<input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 分 </td>
<td> <form name=displaySec></td>
<td> <input type="text" name="displayBox"value="0" size=4 >
</form> </td>
<td> 秒。</td> </tr> </table>
<script>
countMin( )
countSec( )
</script>
</body> </html>
2.请你留意两个文字框中的数字转变。
1.这网页有两个 function, 一个用来计分钟, 一个用来计秒。在这处, 笔者只是示范setTimeout( ) 的操作, 因为计时器有其他更精简的写法。(留意: 这方式的计时并不准确。)
2.留意计秒的 function:
function countSec( )
{x = x + 1
z = x％ 60
document.displaySec.displayBox.value=z
setTimeout("countSec()", 1000)
}
这处的 ％ 符号是 modulus (馀数), 例如 z = x ％ 60 表示先进行 x / 60, 得出的馀数作为 z 这变数, 例如 82 秒, modulus 就是 22, 所以文字框会显示 22 而不是 82。
3.若你要将单位数字在前加上 0, 例如 01, 02, 03 等, 可用以下方法:
function countSec( )
{x = x + 1
z = x ％ 60
if (z < 10){z = "0"+ z}
document.displaySec.displayBox.value=z
setTimeout("countSec()", 1000)
}
10.2clearTimeout( )
在前一节, 你看过如何使用 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
function count1( )
{x = x+ 1
document.display1.box1.value= x
meter1=setTimeout("count1()", 1000)
}
function count2( )
{y = y+ 1
document.display2.box2.value= y
meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body bgcolor=lightcyantext=red> <p> </br>
<form name=display1>
<input type="text" name="box1"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter1)" >
<input type=button value="继续计时" onClick="count1() " >
</form>
<p>
<form name=display2>
<input type="text" name="box2"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter2) " >
<input type=button value="继续计时" onClick="count2( ) " >
</form>
<script>
count1( )
count2( )
</script>
</body> </html>
2.留意网页中的两个文字框及内裡变动的数字, 每个文字框旁有两个按钮, 请你试试两个按钮的反应。
3.请你连续按多次 [继续计时]的按钮, 留意数值的跳动加快了, 原因是每按一次就启动 function 一次, 每个 function 都令数值跳动, 例如启动同一的 function 四次, 就会一秒跳四次。(请看下一节)
10.3Set flag
前个练习说到我们用一个按钮来启动一个 function, 每按一下就会启动这 function 一次, 请看以下例子。
练习-74效果重複的 setTimeout( )
这练习实际是将 练习-73 简化, 只有一个计时器, 笔者想示范的是每按 [继续计时] 一次, 就会启动 count( ) 这 function 一次。
1.请用浏览器开启示范磁碟中的flag1.htm, 这档桉有以下内容:
<html> <head>
<script>
x=0
function count( )
{x = x + 1
document.display.box.value= x
timeoutID=setTimeout("count()", 1000)
}
</script> </head> <body bgcolor=lightcyantext=red> <p> </br>
<form name=display>
<input type="text" name="box"value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(timeoutID) " >
<input type=button value="继续计时" onClick="count( ) " >
</form> <p>
<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只可开启一次的 function
这练习是将上个练习加多一个 flag, 使到每次只能有一个 count( ) 这 function 在进行。
1.请用浏览器开启示范磁碟中的flag2.htm, 这档桉有以下内容:
<html> <head>
<script>
x = 0
flag = 0
function count( )
{x = x+ 1
document.display.box.value= x
timeoutID=setTimeout("count()", 1000)
flag = 1
}
function restart( )
{if (flag==0)
{count( )}
}
</script> </head>
<body bgcolor=lightcyantext=red> <p> </br>
<form name=display>
<input type="text" name="box"value="0" size=4 >
<input type=button value="停止计时"
onClick="clearTimeout(timeoutID);flag=0" >
<input type=button value="继续计时" onClick="restart() " >
</form> <p>
<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()。
0
投稿猜你喜欢
本节内容深浅拷贝循环方式字典常用方法总结一、深浅拷贝列表、元组、字典(以及其他)对于列表、元组和字典而言，进行赋值(=)、浅拷贝（copy）- 啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件：就哭了。一般说来，这
- 本文实例讲述了python实现从一组颜色中找出与给定颜色最接近颜色的方法。分享给大家供大家参考。具体分析如下：这段代码非常有用，可以找到指定
- zipfile模块是python中一个处理压缩文件的模块，解决了不少我们平常需要处理压缩文件的需求 ，本文主要谈谈zipfile几个常用的用
- SQL Server 2005附加数据库文件时出现了Read-Only错误，附加的时候，系统提示mdf文件为只读，可是打开文件属性，这个属性
- anaconda 集成了很多科学计算中所需要的包，如numpy，scipy等等，具体查看anaconda中已经预先安装配置好的包
- mysql limit 分页的用法及注意事项：在我们使用查询语句的时候，经常要返回前几条或者中间某几行数据，这个时候怎么办呢？不用担心，my
- Django2.1 + Python3.6 + nginx + uwsgi 部署到Ubuntu18.04材料准备准备一个Django项目准备
- 分页功能在每个网站都是必要的，对于分页来说，其实就是根据用户的输入计算出应该显示在页面上的数据在数据库表中的起始位置。确定分页需求：1. 每
- 实现效果：实现代码import numpy as npfrom skimage import img_as_floatimport matp
- 本文实例讲述了Python实现批量读取word中表格信息的方法。分享给大家供大家参考。具体如下：单位收集了很多word格式的调查表，领导需要
- 点乘import torchx = torch.tensor([[3,3],[3,3]])y = x*x #x.dot(x)z = torc
- turtle库是python的基础绘图库，官方手册这个库被介绍为一个最常用的用来给孩子们介绍编程知识的方法库，其主要是用于程序设计入门，是标
- 一、xajax与其它ajax框架的比较 xajax功能很简单，但很灵活！~它不象其它一些大的框架，功能确实强大，但执行速度不敢恭维。。功能虽
- 效果展示爬取目标网址：酷我音乐工具使用开发工具：pycharm开发环境：python3.7， Windows10使用工具包：requests
- 情况一本地导出，远程导入（windows导到linux）本机（物理机）数据库全部导出（左下角打开dos窗口）1.启动mysqlnet sta
- 如果我需要在运行有SQL Server的机器上运行病毒扫描软件，怎样做才不会影响性能？ 这取决于您希望运行的病毒扫描软件的类型。目前有三种类
- 1、Numpy ndarray对象numpy ndarray对象是一个n维数组对象，ndarray只能存储一系列相同元素。#一维数组[1,2
- python自定义异常实例详解 本文通过两种
- PHP mysqli_stmt_init() 函数初始化声明并返回 mysqli_stmt_prepare() 使用的对象：<?php
