JS Timing
2024-09-01 22:52:48
JS Timing
通过使用 JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
JavaScript 计时事件
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()
setTimeout()
语法
var t=setTimeout("javascript语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。
当下面这个例子中的按钮被点击时,一个提示框会在5秒中后弹出
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
无穷循环
要创建一个运行于无穷循环中的计时器,我们需要编写一个函数来调用其自身。在下面的例子中,当按钮被点击后,输入域便从 0 开始计数。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
</body>
</html>
clearTimeout()
语法
clearTimeout(setTimeout_variable)
下面的例子和上面的无穷循环的例子相似。唯一的不同是,现在我们添加了一个 "Stop Count!" 按钮来停止这个计数器:
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
</body>
</html>
最新文章
- Oracle Database Server &#39;TNS Listener&#39;远程数据投毒漏洞(CVE-2012-1675)解决
- ql Server 高频,高并发访问中的键查找死锁解析
- windows命令行(Command Prompt / Console)字体设置
- php-fpm启动
- Android:布局合集
- hibernate的速度问题--hibernate.jdbc.fetch_size和 hibernate.jdbc.batch_size
- C++Primer第5版学习笔记(四)
- 文件上传[Uploadify]
- html5后台界面
- 内置函数--bin() oct() int() hex()
- Scipy教程 - 优化和拟合库scipy.optimize
- 27号华为笔试(三道ac两道)
- NOIP算法小结(转载)
- Docker学习笔记-Redis 安装
- 【MySQL】锁——查看当前数据库锁请求的三种方法 20
- php中的heredoc和nowdoc对比
- 【iCore4 双核心板_ARM】例程六:IWDG看门狗实验——复位ARM
- FFmpeg:视频转码、剪切、合并、播放速调整
- kafka的安装 (单机)
- android Zxing 扫描区域的大小设置和自定义扫描view