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. luogu P4943 密室 |最短路

    题目描述 密室被打开了. 哈利与罗恩进入了密室,他们发现密室由n个小室组成,所有小室编号分别为:1,2,...,n.所有小室之间有m条通道,对任意两个不同小室最多只有一条通道连接,而每通过一条通道都需 ...

  2. 配置文件—— .travis.yml

    .travis.yml 介绍 https://docs.travis-ci.com/user/getting-started/ 用途 yaml语法的写出来的配置文件,用来描述如何持续构建,支持各种语言 ...

  3. [TimLinux] scrapy 在Windows平台的安装

    1. 安装Python 这个不去细说,官网直接下载,安装即可,我自己选择的版本是 Python 3.6.5 x86_64bit windows版本. 2. 配置PATH 我用的windows 10系统 ...

  4. Java的值类型和引用类型

    一.问题描述 前几天因为一个需求出现了Bug.说高级点也挺高级,说白点也很简单.其实也就是一个很简单的Java基础入门时候的值类型和引用类型的区别.只是开发的时候由于自己的问题,导致小问题的出现.还好 ...

  5. HDU3870- intervals（差分约束）

    You are given n closed, integer intervals [ai, bi] and n integers c1, ..., cn. Write a program that: ...

  6. Python3 面向对象进阶2

    目录 Classmethod Staticmethod Isinstance Issubclass 反射 概念 hasattr getattr setattr delattr 魔法方法 概念 __ne ...

  7. 大数据学习笔记——Hadoop编程实战之HDFS

    HDFS基本API的应用(包含IDEA的基本设置) 在上一篇博客中,本人详细地整理了如何从0搭建一个HA模式下的分布式Hadoop平台,那么,在上一篇的基础上,我们终于可以进行编程实操了,同样,在编程 ...

  8. 201871010119-帖佼佼《面向对象程序设计（java）》第十周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  9. python学习-logging

    """#设置输出的日志内容格式fmt = '%(asctime)s %(filename)s %(funcName)s [line:%(lineno)d] %(level ...

  10. Docker swarm实战总结

    一.简介 Swarm 是 Docker 官方提供的一款集群管理工具,其主要作用是把若干台 Docker 主机抽象为一个整体,并且通过一个入口统一管理这些 Docker 主机上的各种 Docker 资源 ...