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>

JS Timing的更多相关文章

  1. JavaScript学习05 定时器

    JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...

  2. JavaScript 教程学习进度备忘(二)

    备忘:之前,只将“JS 教程”学习完毕,这篇记录:“JS HTML DOM ”.“JS 对象”.“JS Window”.“JS 库” 书签:跳过:另外跳过的内容有待跟进 _______________ ...

  3. 使用Firebug或chrome-devToolBar深入学习javascript语言核心

    使用Firebug和chrome-devToolBar调试页面样式或脚本是前端开发每天必做之事.这个开发神器到底能给我们带来哪些更神奇的帮助呢?这几天看的一些资料中给了我启发,能不通过Firebug和 ...

  4. JavaScript | window浏览器对象模型

    Js Window - 获取浏览器窗口 全局变量是window对象的属性 全局函数是window对象的方法 HTML DOM的document是window对象属性之一 window.document ...

  5. [译]Node.js Interview Questions and Answers (2017 Edition)

    原文 Node.js Interview Questions for 2017 什么是error-first callback? 如何避免无止境的callback? 什么是Promises? 用什么工 ...

  6. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  7. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

  8. 移动Web与js定时器暂停或不准确计时的问题解决

    PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...

  9. [JS] JavaScript由浅入深(1) 基本特性

    1.全局变量的特性: 在函数体内直接写的变量(未用var标志)自动升级为全局变量. (function func() { i = 100; }()); alert(i); 非常不建议不写var. va ...

随机推荐

  1. NumPy 学习 第三篇：矢量化和广播

    矢量化 矢量化是指用数组表达式替换显式的for循环.在Python中循环数组或其他跟数组类似的数据结构时,使用循环会涉及很多开销.NumPy中的矢量化操作把内部循环委托给高度优化的C和Fortran函 ...

  2. 压缩感知重构算法之SP算法python实现

    压缩感知重构算法之OMP算法python实现 压缩感知重构算法之CoSaMP算法python实现 压缩感知重构算法之SP算法python实现 压缩感知重构算法之IHT算法python实现 压缩感知重构 ...

  3. 结构体与typedef的使用，还有结构体指针的使用（二层结构体指针）

    该类容摘抄自以下链接,为学习之后的记录,不是鄙人原创. 学习链接:https://blog.csdn.net/a2013126370/article/details/78230890 typedef ...

  4. 【解决】image ... could not be accessed on a registry to record its digest.

    [问题]image jmdiservice:1206 could not be accessed on a registry to record its digest. Each node will ...

  5. ARTS-S Why do India and Pakistan keep fighting over Kashmir?

    原文 On Wednesday, Pakistani and Indian fighter jets engaged in a skirmish over Indian-controlled terr ...

  6. python 2.7导入模块问题

    有如下结构的python文件 base |----pkg1 |----__init__.py |----add.py |----pkg2 |----__init__.py |----call_func ...

  7. rapidjson 使用

    生成数组集合的字符串 #include <stdio.h> #include <string> #include <iostream> #include " ...

  8. Happy Birthday! 今天我 1 周岁生日啦！

    2018.09.28,我第 1 天分享文章. 2019.09.28,我连续分享的第 365 天. 今天我 1 周岁啦! 生日意味着一个新的开端, 意味着重新把握生活的机会. 新的一岁,从新头像开始 愿 ...

  9. springboot使用api操作HBase之shell

    HBase的基本读写流程写入流程读取流程HBase的模块与协作HBase启动RegionServer失效HMaster失效HBase常用的Shell命令进入shellhelp命令查询服务器状态查看所有 ...

  10. Swing JTable使用

    package cn.ychx; import java.awt.Dimension; import java.awt.Toolkit; import java.sql.Connection; imp ...